Component Showcase

All token-only primitives with variant and state documentation.

PILOT_SYNTHETIC_ONLY

Brand Mark

--orange-500 / --font-geist-sans

sm / 14px

md / 18px

lg / 28px

Button

--orange-500 / --radius-sm / --space-3..6

variant

size

state:disabled

state:loading

keyboard

Tab to focus · Enter/Space to activate · Focus ring: var(--orange-300)

Icon Button

--radius-sm / --orange-300 ring

variant

size

state:disabled

Input

--border / --orange-500 focus / --error / --radius-sm

default

Account Name

error

Invalid email address

disabled

Account ID

keyboard

Tab to focus · Type to input · Focus ring: var(--orange-500)

Search Combobox

--border / --surface / --z-dropdown

default

keyboard

Type to filter · Arrow keys to navigate · Enter to select · Escape to close

Select

--border / --surface / --z-dropdown / --radius-md

default

Tabs

--orange-500 indicator / --surface-muted hover

Overview content: Account summary and key metrics.

keyboard

Arrow keys to navigate tabs · Enter/Space to activate

Badge

--success-bg / --warning-bg / --error-bg / --info-bg / --radius-full

variantActivePendingFailedProcessingInactive

size:smActivePendingFailedProcessing

Metric Tile

--surface / --border / --space-5 / --radius-md

Total Deposits

₹12,50,000+5.2%

Total Loans

₹8,75,000-2.1%

Branch Count

Pending Approvals

Data Table

--surface / --border / --surface-muted hover

default

Name	Account No	Balance	Status
Rahul Sharma	1001234567	₹2,50,000	Active
Priya Patel	1001234568	₹1,75,000	Pending
Amit Kumar	1001234569	₹4,25,000	Active

Name	Account No	Balance

empty

Name	Account No
No accounts found. Create your first account.

error

Failed to load account data. Please try again.

Pagination

--orange-500 active / --surface-muted hover / --radius-sm

page:3/10

page:1/1 (disabled)

Current page: 1

Popover

--surface / --border / --z-dropdown / --radius-md

Dropdown Menu

--surface / --border / --z-dropdown / --radius-md

keyboard

Arrow keys to navigate · Enter to select · Escape to close

Dialog

--surface / --border / --z-modal / --z-overlay / --radius-md

keyboard

Focus trap active · Escape to close · Return focus on close

Toast

--success-bg / --error-bg / --z-toast / --radius-md

variant

Skeleton

--surface-muted / animate-pulse / --radius-sm..full

text

circle

rectangle

composed

Empty State

--surface-muted / --ink-secondary / --ink-muted

No accounts found

Create your first savings account to get started.

Error State

--error / --error-bg / --ink-secondary

Something went wrong

Unable to load account data. Please check your connection and try again.