UI Component Library

🔘 Button Components

Button Variants

Button Sizes

Loading States

⚡ Spinner Components

Spinner Sizes

Loading

Small

Loading

Medium

Loading

Large

💊 Pill Components

Color Schemes

Neutral
Primary
Success
Warning
Danger

Variants & Sizes

Default
Pending
Active
Small
Medium
Large

Interactive Pills

Clickable
🏆With Icon
With Action
🎯With Icon & Action

📻 Radio Components

Team Selection

Selected: red

Size Selection

Standalone Radio

📋 Select Components

Tournament Format

Different Sizes

Error State

Please select a valid option

🎯 Cornhole Icon Components

Single Bag Icons - All Team Colors

Red

Blue

Green

Yellow

Orange

Purple

Black

White

Different Sizes

Dual Bag Icons

Red vs Blue

Green vs Yellow

Purple vs Orange

Dynamic Team Selection

Selected team (red) vs Blue - Changes based on radio selection above

📱 QR Code Component

Basic QR Code

Default size (200px)

Different Sizes

Small (100px)

Medium (150px)

Large (250px)

With Custom Styling

With Shadow

With Border

Use Cases

Match Invitation Link

Scan to join match

Stream QR Code

Scan to watch stream

📺 StreamView Component

A flexible multi-layout streaming viewer for dual camera feeds in cornhole matches. Supports Picture-in-Picture, Split Screen, and Fullscreen layouts with real-time controls.

📹
No Video
Alice Smith
1920×1080@30fps
Board A
Alice Smith
📹
No Video
Bob Johnson
1920×1080@30fps
Board B
0 - 0
Inning 1

Layout Controls

0% = Top-right, 25% = Bottom-right, 50% = Bottom-left, 75% = Top-left

Component Options

Quick Layout Presets

🔌 StreamConnectButton Component

A specialized button for managing stream connections. Automatically adapts its appearance and behavior based on connection state.

Connection States

Disconnected

Connecting

Connected

Connection failed

Error

Features

  • Automatic state management with visual feedback
  • Color-coded states (green for connected, red for error, gray for idle)
  • Loading spinner during connection attempts
  • Disabled state during connection process
  • Error message display with retry capability

🎲 BoardSetup Component

Interactive board setup visualization showing team positions, player assignments, and throw order for cornhole matches. Allows hosts to configure board positions and visualize the match setup.

1v1 Match Setup

Team red

Team blue

alice
No player
Board
A
Board
B
bob
No player

Toggle to see how throw order indicator and side picker switch between teams

2v2 Match Setup

Team red

Team blue

alice
bob
Board
A
Board
B
charlie
diana

Toggle to see how throw order indicator and side picker switch between teams

Features

  • Visual representation of team positions (left vs right)
  • Player board assignments (Board A vs Board B)
  • Throw order indicators:
    • 1v1: Points to empty board slot (static)
    • 2v2: Toggles which board throws first (interactive)
  • Side picker indicator showing which team can choose sides
  • Interactive player swap arrows - click to swap team players between boards
  • Color-coded team indicators with cornhole bag icons

🪟 Modal Components

Basic Modal

Confirm Modals

📊 Component Library Stats

25+
Components
470
Tests
100%
Coverage
9
Commits