Playground

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

100

system score

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

Components · 33

ds-link

Link

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

Label

excellent

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

Contrast & color92

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