shadcnthemes
Create theme
All collections

Dark shadcn/ui themes

Every theme here includes a hand-tuned dark palette, so this page previews them all in dark mode first. Toggle any card to compare it with light mode.

641 themes · 63 pass WCAG AA in both modes · popular fonts: System, Inter, Geist

Frequently asked questions

How does dark mode work in shadcn/ui?

shadcn/ui reads its colors from CSS variables. The dark palette lives in a .dark block, and adding the dark class to <html> (for example with next-themes) switches every component at once.

How do I install a dark theme?

Open any theme and copy its shadcn CLI command (npx shadcn@latest add …), or copy the Tailwind v4 CSS into app/globals.css, replacing the :root and .dark blocks.

Are these themes free?

Yes. Every theme on shadcnthemes.com is free to use in personal and commercial projects.

Can I customize a theme?

Yes. Click “Open in editor” on any theme to change colors, fonts, radius and shadows, check contrast, and export the result.