shadcn Theme Generator

Customize every CSS variable, preview changes live, then export your globals.css.

Monochromatic

Nature

Food & Drink

Tech

Vintage

Vibes

Live Preview

Theme: Blue

Buttons

Badges

Default

Secondary

Destructive

Outline

Cards

Total Revenue

$45,231

+20.1% from last month

Active Users

2,350

+180 since last week

Conversion Rate

3.6%

+0.4% since yesterday

Sidebar

Chart

Monthly Overview

Jan - Jun 2024

Accordion

Yes. It adheres to the WAI-ARIA design pattern and is keyboard navigable.

Input & Select

Full name

Email address

Framework

Message

Toggle Group

Text formatting

Text alignment

Progress

Storage used72%

Tasks completed45%

Budget remaining88%

Date Picker

Popover

Toast

Form Controls

Email notifications

Marketing emails

Security alerts

Volume: 65%

Storage limit

Typography

Heading Level 1

Heading Level 2

Heading Level 3

Body text using the foreground color. The quick brown fox jumps over the lazy dog.

Muted text for secondary information and captions.

shadcn Theme Generator

Is it accessible?

Is it styled?

Is it animated?

Heading Level 1

Heading Level 2

Heading Level 3

What is this shadcn theme generator?

What is OKLCH and why does shadcn use it?

How do I apply the exported theme to my project?

Can I import an existing theme?

What does the Radius slider control?

What are the chart color variables for?

Why are there separate sidebar variables?

What are the best shadcn theme generator alternatives?