Theme preview

Color palette

Live token values for the current mode, with WCAG contrast checks.

Surfaces

Aa foreground
--background
Aa card-foreground
--card
Aa popover-foreground
--popover
Aa muted-foreground
--muted
Aa accent-foreground
--accent

Brand

Aa primary-foreground
--primary
Aa secondary-foreground
--secondary

Feedback

Aa destructive-foreground
--destructive

Borders and focus

--border
--input
--ring

Charts

--chart-1
--chart-2
--chart-3
--chart-4
--chart-5

Contrast (WCAG 2.x)

Foreground Background Ratio Rating
foreground background
card-foreground card
popover-foreground popover
primary-foreground primary
secondary-foreground secondary
muted-foreground muted
muted-foreground background
accent-foreground accent
destructive-foreground destructive
destructive background
primary background
border background
input background
ring background

Text pairs need 4.5:1 for AA. Borders, input outlines and the focus ring only need 3:1 (non-text contrast).

Light vs dark

Both themes rendered at once, regardless of the page mode.

Light

forced
Create project

Deploy your new project in one click.

Storage 64%

Dark

forced
Create project

Deploy your new project in one click.

Storage 64%

Typography and shape

Type scale, link and code styles, and the radius scale.

Heading one

Heading two

Heading three

Heading four

Body text sits on the card surface. The quick brown fox jumps over the lazy dog, with an inline link and inline code.

Muted text is used for descriptions and helper copy.

A quoted line with a border-colored rule.

Radius scale

sm
md
lg
xl
full

Opacity ramps

10
25
50
75
100

Components

The shadcn components in their common states.

Buttons

Every variant at every size, plus disabled and icon states.

xs
sm
default
lg
disabled
icons
badges Default Secondary Outline Destructive Ghost Link

In context

A mock dashboard to judge the theme in a realistic layout.

Revenue

$45,231
+20.1% from last month

Subscriptions

+2,350
+180.1% from last month

Sales

+12,234
+19% from last month

Active now

573
+201 from last month
Overview

Stacked bars colored with the chart tokens.

JanFebMarAprMayJun
chart-1chart-2chart-3chart-4chart-5
Recent sales

You made 265 sales this month.

OM

Olivia Martin

olivia@example.com

+$1,999.00
JL

Jackson Lee

jackson@example.com

+$39.00
IN

Isabella Nguyen

isabella@example.com

+$299.00
WK

William Kim

will@example.com

-$99.00
Transactions
Customer Status Amount
Olivia Martin Paid +$1,999.00
Jackson Lee Pending +$39.00
Isabella Nguyen Paid +$299.00
William Kim Refunded -$99.00
Settings

Manage your account preferences.