Components & Design Theme

Every component and token in one place — switch themes from the header to see how the aesthetic changes.

Color tokens

Semantic tokens used by every component. Switch themes to see them remap.

Semantic palette
Drive component colors via these CSS variables.

Typography

Semantic token scale — apply tokens, never pixel literals. Sizes, line heights, and tracking are defined per theme.

TokenSizeLine heightTrackingWeightUsagePreview
title-h160px64px-0.30px700Hero headingsAa
title-h252px56px-0.52px700Section headingsAa
title-h340px44px-0.40px600Card titles, modalsAa
title-h432px36px-0.32px600Sub-section headingsAa
title-h524px32px-0.24px600Labels, group headingsAa
body-x-large20px28px-0.10px400Lead / intro paragraphsThe quick brown fox
body-large18px26px-0.09px400Card descriptionsThe quick brown fox
body-medium16px24px-0.08px400Default bodyThe quick brown fox
body-small14px20px-0.07px400Secondary info, labelsThe quick brown fox
body-x-small12px16px-0.06px400Captions, timestampsThe quick brown fox
label13px18px0.02px500Form labels, nav itemsEmail address
mono13px20px0400Code, API keyssk_live_4242
Display lede — two-tone

Marketing-scale display type that pairs a strong lead sentence with a softer supporting clause inline. Use text-foreground for the lede and text-muted-foreground for the continuation on light surfaces; invert to text-backgroundand text-background/60 on dark surfaces.

Flexible solutions for every business model. Grow your business with a comprehensive set of tools — designed to work individually or together.

Reliable, extensible infrastructure for every stack. Adapt the platform to your business needs with flexible integration options.

Built for builders. Composable primitives that scale with your team.

Ship faster. Opinionated defaults, deep customization.

Spacing & Radius

Spacing scale and the 5-level radius hierarchy.

Spacing scale
4px
8px
12px
16px
24px
32px
48px
64px
Radius hierarchy
Tabs
0px
Small chips/tags
4px
Controls & inputs
6px
Cards
8px
Status pills
20px

Shadows

Elevation tiers applied to cards, popovers, and modals.

Subtle (cards)
0 1px 2px rgba(0,0,0,0.04)
Floating (popovers)
0 2px 5px rgba(0,0,0,0.04)
Modal
0 8px 24px rgba(0,0,0,0.12)

Motion

Duration and easing tokens, and the keyframes that drive every transition.

Durations
Time tokens applied across every animated surface.
TokenValueUse
--duration-instant80msMicro-feedback: press, ripple acks
--duration-fast150msHover, focus, tooltips, popovers
--duration-base200msToasts, default transitions
--duration-moderate300msModals, sheets — enter
--duration-slow400msPage-level transitions, large surfaces
Easings
Curves paired with durations to give motion its character.
TokenCurveUse
--ease-outcubic-bezier(0, 0, 0.2, 1)Entering elements — modals, tooltips
--ease-incubic-bezier(0.4, 0, 1, 1)Exiting elements — dismiss, close
--ease-standardcubic-bezier(0.4, 0, 0.2, 1)Hover, focus, color shifts
--ease-snapcubic-bezier(0.19, 1, 0.22, 1)Dropdowns, toasts, tool-feel
Live keyframes
Click a row to replay the animation.
scale-in

Buttons

All variants, sizes, and states.

Loading state

Forms & Controls

Text inputs, selects, and themed switches, checkboxes, and radios.

Text inputs & selects
Notifications
Saves on toggle
Permissions
Select all uses indeterminate
Plan
Single-select radio group
Combobox
Searchable select for long option lists.
File upload
Drop zone with default, drag-over, uploaded, and invalid states.
Drag and drop files here
or click to browse — PDF, PNG, JPG up to 10MB
Drag and drop files here
or click to browse — PDF, PNG, JPG up to 10MB
quarterly-report.pdf
2.4 MB
Drag and drop files here
or click to browse — PDF, PNG, JPG up to 10MB
File exceeds 10MB limit.

Dates & Calendar

Date picker and calendar themed via semantic tokens.

DatePicker

MM / DD / YYYY

Please enter a valid date.

Pick any date from today forward.

5-day range selected.

Inline calendar
August 2026

Data Display

Stat cards, badges, avatars, tables, accordions, progress, skeletons.

Stat cards
Compact KPI tiles with optional delta indicators.
Total Revenue
$48,291
12.4%
Active Users
3,842
2.1%
Uptime
99.98%
Open Tickets
14
0.0%
Badges
Base variants used across the app.
Default
Secondary
Outline
Destructive
Status badges
Use in tables via statusVariant + fireStatusClass from @/lib/table-status. The fire-only / fire-hide-in-fire spans let Firestarter swap the label to uppercase.
PaidCOMPLETED
PendingPENDING
RefundedINFO
FailedFAILED
DraftNEUTRAL
Avatars
ACJDRBLG
Table
Canonical shape: wrap in a Card, use fire-num-col on numeric headers and fire-mono on id / date / numeric cells.
InvoiceCustomerDateStatusAmount
INV-2041Acme Inc.Mar 12
PaidCOMPLETED
$1,240.00
INV-2042GlobexMar 11
PendingPENDING
$820.00
INV-2043InitechMar 10
FailedFAILED
$430.00
Progress
Skeleton
Accordion

Overlays

Modal, sheet, popover, hover card, alert dialog, and full-page overlay.

Feedback

Alerts, banners, and empty states.

No results found
Try adjusting your search or filters.

Toasts

Bottom-center notifications. Four variants with left-border accents; max 30 chars.

Trigger toasts
Click to preview each variant.

Stepper

Vertical progress stepper with complete, current, and upcoming states. Supports nested substeps.

  1. Verify your business
  2. 2
    Add your bank
    • Bank details
  3. 3
    Secure your account
  4. 4
    Add extras
  5. 5
    Review and finish

Charts

Recharts samples — colors follow the active theme.

Area
Line
Bar
Pie