← Cinnabar

Playground

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

98
system score
npx synthesisui@latest init --styles tailwind --ds cinnabar

Components · 8

ds-button

intent

Label

98

excellent

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

Proportion & Typen/a
Token Discipline100
Accessibility & States97

Copy into your app

<button className="ds-button" data-intent="primary">…</button>

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