> ## 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.
# ThemeProvider
> Configure the theme system at the root of your application
The `ThemeProvider` component wraps your application to enable theme switching functionality. It must be placed at the root level to make themes available throughout your app.
## Installation
The `ThemeProvider` is automatically included when you install the theme system:
```bash theme={null}
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system.json
```
## Usage
Wrap your application with the `ThemeProvider` in your root layout:
```tsx title="app/layout.tsx" theme={null}
import { ThemeProvider } from "@/components/theme-provider";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
Add `suppressHydrationWarning` to the `` tag to prevent hydration warnings when themes are applied.
## Implementation
The `ThemeProvider` is a thin wrapper around `next-themes` with pre-configured settings optimized for the tweakcn theme system:
```tsx title="components/theme-provider.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}
);
}
```
## Configuration
The `ThemeProvider` uses the following configuration from `next-themes`:
The HTML attribute used to apply themes. Sets `data-theme="{theme-name}"` on the root element.
Array of all available theme values. Automatically generated from your installed themes, including both light and dark variants (e.g., `["default-light", "default-dark", "catppuccin-light", "catppuccin-dark", ...]`).
The theme applied on first load before any user selection. Can be customized by importing and using `DEFAULT_THEME` from `@/lib/themes-config`.
System preference detection is disabled because tweakcn themes handle both light and dark modes internally. Each theme exists as separate `-light` and `-dark` variants.
Prevents CSS transitions during theme changes to avoid visual flash and improve perceived performance.
## Props
Your application content that will have access to theme functionality.
## Theme Values
The provider automatically loads all installed themes from `themes-config.ts`. Each theme has two variants:
* `{theme-name}-light` - Light mode variant
* `{theme-name}-dark` - Dark mode variant
Examples:
* `default-dark`
* `catppuccin-light`
* `cyberpunk-dark`
* `vercel-light`
## Customization
If you need to customize the provider configuration, you can modify the component:
```tsx title="components/theme-provider.tsx" theme={null}
export function ThemeProvider({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
The `ThemeProvider` must be a client component (`"use client"`). It uses React context and browser APIs that only work on the client side.
## Next.js App Router
For Next.js 13+ with the App Router, place the provider in your root layout:
```tsx title="app/layout.tsx" theme={null}
import { ThemeProvider } from "@/components/theme-provider";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
## Vite/React
For Vite or standard React apps, wrap your app in the main entry point:
```tsx title="src/main.tsx" theme={null}
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "./components/theme-provider";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
);
```
## Related
Add a dropdown UI for selecting themes
Control themes programmatically