Playground

Pick a component, toggle its variants, and watch it react on Onyx's own canvas. Copy the JSX and it drops straight into your app.

100

system score

npx synthesisui@latest init --styles tailwind --ds onyx

Components · 11

ds-kbd

⌘K

ds-kbd has one look - no variants to toggle.

Label

100

excellent

Deterministic quality - contrast, tokens, spacing, type, states, density.

Proportion & Typen/a

Token Discipline100

Accessibility & States100

Copy into your app

<span className="ds-kbd">⌘K</span>

.ds-kbd class ships with npx synthesisui@latest init --styles tailwind --ds onyx - the variants above are plain data attributes.