Playground

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

system score

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

Components · 8

ds-card

A card wearing this system.

padding

emphasis

100

excellent

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

Spacing & Proportion100

Token Discipline100

Accessibility & States100

Copy into your app

<div className="ds-card" data-emphasis="default">…</div>

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