Develop · lib preview

v1 components rendered against the live tokens. Toggle the page theme with the control below; the lower block is force-dark via a nested .dark wrapper.

Controls

Buttons

Primary Secondary Ghost Destructive Small Large Disabled

Card + Dialog

Card title

A token-consuming surface. Border, radius, and shadow all come from the shared tokens.

Open dialog

Elevated, large padding.

Native <dialog> centered with backdrop, themed by tokens.

Close

Header (signed-out / default nav)

Footer

Forced dark (.dark wrapper)

Primary Secondary Ghost

Dark card.