Playground

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

system score

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

Components · 12

ds-card

A card wearing this system.

tone

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-tone="plain">…</div>

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