Design kit

Every shadcn primitive used in the dashboard, rendered in one place. Edit the CSS tokens in apps/dashboard/app/globals.css and reload to see the cascade.

Color tokens

HSL values defined on :root and .dark.

background

--background

foreground

--foreground

card

--card

card-foreground

--card-foreground

popover

--popover

popover-foreground

--popover-foreground

primary

--primary

primary-foreground

--primary-foreground

muted

--muted

muted-foreground

--muted-foreground

accent

--accent

accent-foreground

--accent-foreground

destructive

--destructive

destructive-foreground

--destructive-foreground

border

--border

input

--input

ring

--ring

Radius

--radius =var(--radius)·used by rounded-md / rounded-lg utilities

full

Typography

text-2xl semibold — page title

text-lg semibold — section heading

text-base — body

text-sm — table / dense body

text-xs muted-foreground — captions, hints

font-mono text-xs — IDs, paths

Buttons

Badges

Default

Secondary

Outline

Destructive

Success

Warning

Form controls

Input

Input · disabled

Textarea

Select

Switch

Checkbox

Card

Card title

A surface for grouping related content. Used heavily in renders and analyses.

Body content sits on bg-card. Tokens read from --card / --card-foreground.

Tabs

Content of tab A.

Table

ID	Name	Status	Cost
8ad57ffb	Sample render	completed	$0.615
32058fc6	Goal render	rendering	$0.205
e0b1d7be	Image route	failed	—

Dialog

Surfaces

bg-background

bg-card

bg-muted

bg-accent

bg-primary

bg-destructive