Design system

Khelkood Components

A central gallery for every component currently available insrc/componentsthemed with the updated brand blue and accent yellow.

Primary blue

#336894

Accent yellow

#f2a300

Route

/components

Components

8 in `src/components/ui`

Buttons

Primary and supporting actions with the new brand palette.

Badges

Status and category chips with primary, accent, and neutral treatments.

FeaturedNew slot available12 courtsPopularSold out

Input

Single-line form controls from `src/components/ui/input.tsx`.

Textarea

Multi-line text input from `src/components/ui/textarea.tsx`.

Spinner

Loading indicator from `src/components/ui/spinner.tsx`.

Checking venue availability

OTP

Verification input for login and booking confirmation flows.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Pagination

A sample page navigation pattern for listings and search results.

Sonner

Toast notifications powered by `src/components/ui/sonner.tsx`.