live token editor

Theme editor

Every component below renders with the active theme's tokens. Tweak any token live with the editor in the bottom-right, then download a complete theme.css.

Component

Button

Default, primary, outline, and ghost variants. Renders as <button> or <a> when href is set.

<Button variant="primary">

Component

Badge & Tag

Status indicators (Badge) and removable labels (Tag).

DefaultInfoLiveBetaFailedlabelremovable

<Badge status="success" dot>

Component

Input

Text fields with focus rings driven by --ai tokens.

<Input invalid />

Component

Checkbox · Radio · Switch

Form selections — multi, single-of-many, and instant toggle.

Component

Alert

System messages — info, success, warning, error.

Heads up.

A new minor version is available.

Saved.

Your preferences have been updated.

Trial ends in 3 days.

Add a payment method to continue.

Couldn't process payment.

Card was declined.

<Alert status="error" />

Component

Card

Containers for grouped content.

Production deploy

Deployed 3m ago by alex. All checks passed in 1m 42s.

Team members

8 collaborators across 3 workspaces. Roles synced from SSO.

Storage used

4.2 GB of 10 GB. Resets monthly on the 1st.

<Card title="…">

Component

Tabs

Roving-focus tabs with arrow-key navigation.

Overview content — high-level metrics and status.

<Tabs.Trigger value="…" />

Component

Avatar

Initials by default; image when src is provided.

AKJLRPDC

<Avatar name="…" size="lg" />

Component

Progress & Skeleton

Loading affordances — determinate progress, indeterminate spinner, shimmer skeletons.

Build progress

Verifying signature

LoadingProcessing…

<Progress value={68} />

Want to see all eight theme families side by side? Open the theme gallery →