Playground

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

100

system score

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

Components · 9

ds-card

A card wearing this system.

padding

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" data-emphasis="default">…</div>

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