Installation
Framework Installation
These themes work with any React framework. Choose your framework below for specific installation instructions.
Next.js
App Router & Pages Router
Vite
React + Vite setup
Astro
Astro with React islands
Remix
Full-stack React framework
Registry URLs
Each framework has a dedicated registry URL. Use the URL that matches your framework to install all 42+ themes at once.
| Framework | Install Command | Theme Attribute |
|---|---|---|
| Next.js | npx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system.json | data-theme |
| Vite | npx shadcn@latest add https://tweakcn-picker.vercel.app/r/vite/theme-system.json | data-theme |
| Astro | npx shadcn@latest add https://tweakcn-picker.vercel.app/r/astro/theme-system.json | data-theme |
| Remix | npx shadcn@latest add https://tweakcn-picker.vercel.app/r/remix/theme-system.json | data-theme |
Individual Theme Installation
| Theme | Install Command |
|---|---|
| Catppuccin | npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-catppuccin.json |
| Claude | npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-claude.json |
| Vercel | npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-vercel.json |
| Cyberpunk | npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-cyberpunk.json |
Browse all available themes on the home page.
Manual Installation
If you prefer to install manually or need more control, you can copy the theme CSS directly. Visit the theme preview page and click "Copy CSS" to get the raw styles.