Command Palette

Search for a command to run...

Theme Switcher

21st.dev

A theme switcher component with smooth animations between light, dark, and system modes.

Theme Switcher

Current: system

import { ThemeSwitcher } from "@/components/optics/theme-switcher";import { useTheme } from "next-themes";import { useModeAnimation, ThemeAnimationType } from "react-theme-switch-animation";import * as React from "react";<UnknownElementType />

Installation

pnpm dlx shadcn@latest add @optics/theme-switcher

Props

<ThemeSwitcher />
Name
Type
className
string
value
"system" | "light" | "dark"
onChange
(theme: string) => void
defaultValue
"system" | "light" | "dark" (default: "system")
TextareaTimezone