Getting Started with tweakcn/theme-picker
Beautiful, professionally designed themes for shadcn/ui. Install with a single command, customize everything.
Quick Start
Install the complete theme system with one command. Includes all 42+ themes, the ThemeProvider, and everything you need.
$ pnpm dlx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system.jsonFlash Prevention Setup
- • Add :root fallback in globals.css with default theme colors
- • Add inline script in layout.tsx <head> to set data-theme before render
- • Optional: Add @media (prefers-color-scheme) for system preference
Script location: app/layout.tsx <head>
View full Next.js guide →What's Included
When you install a theme, you get everything you need:
Theme CSS Variables
Complete OKLCH color system with light and dark mode support
Theme Provider
Pre-configured provider component with next-themes integration
ThemeSwitcher Component
Ready-to-use dropdown component for switching themes and modes
Custom Typography
Carefully selected Google Fonts that complement the theme
What Gets Modified
The CLI will modify your project
- • globals.css - Imports theme CSS files
- • ThemeProvider - Creates or updates your theme provider component
- • ThemeSwitcher - Adds the theme switcher component
- • styles/themes/ - Adds all theme CSS files
- • package.json - Installs next-themes if not present
Make sure to commit your changes before installing!
Install Individual Themes
Prefer to install just one theme? You can install any of our 42+ themes individually:
$ pnpm dlx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-catppuccin.jsonReplace theme-catppuccin with any theme name like theme-claude, theme-vercel, etc.
Next Steps
Choose your framework to get detailed installation instructions: