Utility Components

Client-side provider wrappers for authentication and theming.

These components wrap your app in the necessary providers for dark/light mode theming. They are composed in the root layout.

ThemeProvider

Client component wrapping ThemeProvider from next-themes for dark/light mode support. Passes through all next-themes configuration props.

components/theme-provider.tsx

Providers

Client component wrapping children in SessionProvider from next-auth/react for client-side authentication state (used in dashboard pages).

components/providers.tsx

Root Layout

The root app/layout.tsx uses ThemeProvider to wrap the entire app, along with react-hot-toast and Vercel Analytics:

app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "react-hot-toast";
import { Analytics } from "@vercel/analytics/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={...}>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          {children}
          <Toaster
            position="bottom-right"
            toastOptions={{
              style: {
                background: "hsl(var(--card))",
                color: "hsl(var(--card-foreground))",
                border: "1px solid hsl(var(--border))",
              },
            }}
          />
        </ThemeProvider>
        <Analytics />
      </body>
    </html>
  );
}

Note: ThemeProvider uses the "use client" directive. The Providers component (SessionProvider) is used separately in dashboard layouts that need client-side auth state.