Playground

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

system score

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

Components · 7

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 halogen - the variants above are plain data attributes.