Playground

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

system score

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

Components · 7

ds-card

A card wearing this system.

emphasis

100

excellent

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

Proportion & Typen/a

Token Discipline100

Accessibility & Statesn/a

Copy into your app

<div className="ds-card">…</div>

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