Next.js Installation

Prerequisites

Before installing themes, ensure you have shadcn/ui set up in your Next.js project. If you haven’t already:

Initialize shadcn/ui

npx shadcn@latest init

Install required components

The theme system requires these shadcn/ui components:

npx shadcn@latest add dropdown-menu scroll-area button

Installation

Install the theme system

Install the complete theme system with all 40+ themes:

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system

yarn dlx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system

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

Add ThemeProvider to your root layout

Wrap your application with the ThemeProvider in app/layout.tsx:

app/layout.tsx

import { ThemeProvider } from "@/components/providers/theme-provider";
import "@/styles/themes/index.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

The suppressHydrationWarning prop prevents hydration warnings from theme switching.

Add the ThemeSwitcher to your UI

Import and use the ThemeSwitcher component anywhere in your app:

components/header.tsx

import { ThemeSwitcher } from "@/components/theme-switcher";

export function Header() {
  return (
    <header>
      <nav>
        {/* Your navigation */}
        <ThemeSwitcher />
      </nav>
    </header>
  );
}

How it works

The Next.js adapter uses next-themes for theme management:

Theme Provider implementation

Located at components/providers/theme-provider.tsx:

"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 (
    <NextThemesProvider
      attribute="data-theme"
      themes={allThemeValues}
      defaultTheme={DEFAULT_THEME}
      enableSystem={false}
      disableTransitionOnChange
    >
      {children}
    </NextThemesProvider>
  );
}

Themes are stored as data-theme attributes with values like catppuccin-dark or vercel-light.

Theme configuration

All theme metadata is in lib/themes-config.ts:

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
];

Theme switching logic

The ThemeSwitcher component parses theme strings to separate color theme from mode:

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+:

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-catppuccin

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:

styles/themes/index.css

@import "./catppuccin.css";
@import "./vercel.css";
@import "./supabase.css";

Customizing themes

All theme CSS files are in styles/themes/. Each theme defines CSS variables:

styles/themes/catppuccin.css

[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:

import { useTheme } from "next-themes";

function MyComponent() {
  const { theme, setTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme("catppuccin-dark")}>
      Current theme: {theme}
    </button>
  );
}

Next steps

Browse Themes

Explore all 40+ available themes

Theme Picker

Preview themes in real-time

Vite Setup

Install themes in Vite React

Astro Setup

Install themes in Astro

Get Started

Installation Guides

Usage

Themes

Prerequisites

Installation

How it works

Adding individual themes

Customizing themes

TypeScript usage

Next steps

Browse Themes

Theme Picker

Vite Setup

Astro Setup

​Prerequisites

​Installation

​How it works

​Adding individual themes

​Customizing themes

​TypeScript usage

​Next steps

Browse Themes

Theme Picker

Vite Setup

Astro Setup

Prerequisites

Installation

How it works

Adding individual themes

Customizing themes

TypeScript usage

Next steps