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 · 35

ds-link

Link

ds-link has one look - no variants to toggle.

Label

excellent

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

Contrast & color87

Token discipline100

Spacing & rhythmn/a

Typographyn/a

States & feedbackn/a

Resting staten/a

Density & hit arean/a

Archetype fidelityn/a

Copy into your app

<a className="ds-link">…</a>

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