v2.0.0
Playground

Playground

Primitive color tokens stay read-only in token chains. The playground scopes overrides to the preview root so edits do not leak into the docs shell.

Display

Component styles resolve through CSS variables.
Feedback
default
destructive
Overlay
Aspect Ratio
Layout
16:9
Display
ABCD
Display
Stable
default
Default
secondary
Secondary
destructive
Destructive
outline
Outline
ghost
Ghost
link
Link
Navigation
Form
default
secondary
destructive
ghost
link
outline
Form
v1.2
Form
June 2026
Layout
Project status
Updated just now
Ready for review.
Carousel
Display
Slide 1
Slide 2
Slide 3
Form
Collapsible
Display
Semantic and component layers.
Form
React
Vue
CSS
Navigation
Overlay
Right click area
default
Copy token
destructive
Delete token
Overlay
Overlay
Overlay
default
Copy
destructive
Reset
Feedback
No overrides
Add token edits to preview them.
default
AB
icon
AB
Form

Semantic token override.

legend
Token group
label
Token group
Overlay
Form
Form
--
Form
1
2
3
4
Display
Component tokens

Scoped to each shared class contract.

default
Default item
outline
Outline item
muted
Muted item
media default
AB
media icon
AB
media image
Display
CommandK
Label
Form
Navigation
default
Export CSS
destructive
Delete preset
Form
Navigation
Navigation
Overlay
Feedback
Form
Layout
Preview
Tokens
Layout
--primary
--secondary
--accent
--destructive
Form
Layout
Semantic
Component
Overlay
Feedback
Form
Sonner
Feedback
Spinner
Feedback
Form
Table
Display
TokenLayer
--primarySemantic
Navigation
React package classes.
default
line
Form
Form
default
outline
Toggle Group
Form
default
outline
Overlay