Theme Toggle

A compact dark/light mode toggle button powered by next-themes with Sun/Moon icons.

Preview

Toggle dark / light mode

Installation

npx shadcn@latest add @shadszn/theme-toggle

Usage

import { ThemeToggle } from "@/components/ui/theme-toggle"

export default function Example() {
  return (
    <nav className="flex items-center gap-2">
      <span>Settings</span>
      <ThemeToggle />
    </nav>
  )
}

Prerequisites

ThemeToggle requires next-themes to be set up in your app. Wrap your root layout with ThemeProvider.

import { ThemeProvider } from "next-themes"

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="dark">
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Props

Prop	Type	Default	Description
className	string	---	Additional CSS classes for the toggle button.