/// getting-started
Playground
A single composed panel — cards, buttons, badges, an input, tabs, and a status table — wired to live controls. Flip the theme, accent, and density above it to feel how the whole system moves together on one set of tokens.
Theme
Accent
Density
Deployment
api-gateway · eu-central-1
Healthyv1.6.9Quota 82%
| Service | State | p99 (ms) |
|---|---|---|
| api-gateway | running | 42 |
| worker | degraded | 318 |
| scheduler | idle | — |
Nothing in the panel changes markup as you toggle. The controls only set data-theme, data-accent, and data-density on the region wrapper — every component inside re-reads the token layer and re-tunes itself. That is the entire theming model, made tangible. Read how it works on the Theming page.
An honest v1
This is a fixed composition, not yet a free-form editor. A full code playground — edit props and markup, see the result live — is planned. For now, browse any component page for runnable, copyable examples of each component in isolation.