- Home
- UI demo
Admin UI demo
Role classes in both themes, then reusable primitives. Icons are Lucide. Tailwind is layout only.
data-theme="light"
Buttons
Alerts
Primary alert — plan change pending.
Success alert — shop published.
Info alert — DNS still propagating.
Warning alert — quota at 80%.
Danger alert — payment failed.
Badges
DefaultPrimarySuccessInfoWarningDanger
Tabs
Card
Nested card using surface, text, and border tokens.
data-theme="dark"
Buttons
Alerts
Primary alert — plan change pending.
Success alert — shop published.
Info alert — DNS still propagating.
Warning alert — quota at 80%.
Danger alert — payment failed.
Badges
DefaultPrimarySuccessInfoWarningDanger
Tabs
Card
Nested card using surface, text, and border tokens.
Primitives
PageHeader, SearchSelect, PillSelect, TagInput, DataList, Repeater, FileDrop, CollapsibleCard — compose these on real pages. Lucide for chrome, not emoji.
Search select
Pill select
Size
Collapsible card
Section
Click the header to collapse.
Body stays in the card. Default is open.
Tag input
Press Enter or comma after each tag.
linensummer
Data list
| Actions | |||
|---|---|---|---|
| Linen shirt | active | €39 | |
| Canvas tote | draft | €18 | |
| Wool scarf | active | €54 | |
| Cap | active | €22 |
Repeater
Press Enter or comma after each value.
SML
File drop
Cover
Gallery