> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BankkRoll/tweakcn-theme-picker/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js Installation
> Install and configure tweakcn themes in your Next.js application
## Prerequisites
Before installing themes, ensure you have shadcn/ui set up in your Next.js project. If you haven't already:
```bash theme={null}
npx shadcn@latest init
```
The theme system requires these shadcn/ui components:
```bash theme={null}
npx shadcn@latest add dropdown-menu scroll-area button
```
## Installation
Install the complete theme system with all 40+ themes:
```bash npm theme={null}
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system
```
```bash yarn theme={null}
yarn dlx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system
```
```bash pnpm theme={null}
pnpm dlx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system
```
This installs:
* `lib/themes-config.ts` - Theme configuration and metadata
* `components/providers/theme-provider.tsx` - Next.js theme provider
* `components/theme-switcher.tsx` - Interactive theme switcher UI
* `styles/themes/*.css` - All 40+ theme CSS files
* `next-themes` dependency for theme management
Wrap your application with the ThemeProvider in `app/layout.tsx`:
```tsx app/layout.tsx theme={null}
import { ThemeProvider } from "@/components/providers/theme-provider";
import "@/styles/themes/index.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
The `suppressHydrationWarning` prop prevents hydration warnings from theme switching.
Import and use the ThemeSwitcher component anywhere in your app:
```tsx components/header.tsx theme={null}
import { ThemeSwitcher } from "@/components/theme-switcher";
export function Header() {
return (
);
}
```
## How it works
The Next.js adapter uses **next-themes** for theme management:
Located at `components/providers/theme-provider.tsx`:
```tsx theme={null}
"use client";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ReactNode } from "react";
import { allThemeValues, DEFAULT_THEME } from "@/lib/themes-config";
export function ThemeProvider({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
Themes are stored as `data-theme` attributes with values like `catppuccin-dark` or `vercel-light`.
All theme metadata is in `lib/themes-config.ts`:
```typescript theme={null}
export interface ThemeConfig {
name: string; // e.g., "catppuccin"
title: string; // Display name
primaryLight: string; // Primary color in light mode
primaryDark: string; // Primary color in dark mode
fontSans: string; // Font family
}
export const themes: ThemeConfig[] = [
{
name: "catppuccin",
title: "Catppuccin",
primaryLight: "oklch(0.55 0.25 297.02)",
primaryDark: "oklch(0.79 0.12 304.77)",
fontSans: "Montserrat, sans-serif",
},
// ... 40+ more themes
];
```
The ThemeSwitcher component parses theme strings to separate color theme from mode:
```typescript theme={null}
function parseTheme(theme: string | undefined): {
colorTheme: string;
mode: "light" | "dark";
} {
if (!theme) return { colorTheme: "default", mode: "dark" };
if (theme.endsWith("-dark")) {
return { colorTheme: theme.replace("-dark", ""), mode: "dark" };
}
if (theme.endsWith("-light")) {
return { colorTheme: theme.replace("-light", ""), mode: "light" };
}
return { colorTheme: "default", mode: "dark" };
}
```
## Adding individual themes
To install specific themes instead of all 40+:
```bash Catppuccin theme theme={null}
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-catppuccin
```
```bash Multiple themes theme={null}
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-catppuccin
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-vercel
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-supabase
```
Then import only the themes you need:
```css styles/themes/index.css theme={null}
@import "./catppuccin.css";
@import "./vercel.css";
@import "./supabase.css";
```
## Customizing themes
All theme CSS files are in `styles/themes/`. Each theme defines CSS variables:
```css styles/themes/catppuccin.css theme={null}
[data-theme="catppuccin-light"] {
--background: oklch(0.98 0.01 273.65);
--foreground: oklch(0.30 0.04 274.26);
--primary: oklch(0.55 0.25 297.02);
--primary-foreground: oklch(1 0 0);
/* ... more variables */
}
[data-theme="catppuccin-dark"] {
--background: oklch(0.24 0.03 266.56);
--foreground: oklch(0.86 0.02 267.81);
--primary: oklch(0.79 0.12 304.77);
/* ... more variables */
}
```
Edit these files to customize colors, borders, shadows, and more.
## TypeScript usage
Use the `useTheme` hook from next-themes:
```typescript theme={null}
import { useTheme } from "next-themes";
function MyComponent() {
const { theme, setTheme } = useTheme();
return (
);
}
```
## Next steps
Explore all 40+ available themes
Preview themes in real-time
Install themes in Vite React
Install themes in Astro