Click the toggle to switch between light and dark mode.
Installation
npx shadcn@latest add @iconiq/theme-toggleProps
ThemeToggle
2 props
Client-only pill switch that toggles light and dark mode by adding or removing the `dark` class on `document.documentElement`, with sun and moon icons inside a sliding knob.
size
"sm" | "md" | "lg"Default
mdControls track, knob, and icon dimensions. Use `sm` in compact toolbars and `lg` for hero or settings layouts.
className
stringOptional class names merged onto the root button for spacing or layout in your header or settings panel.
Notes
On mount, the control reads `prefers-color-scheme: dark` and syncs both local state and the document `dark` class.
Before hydration completes, a neutral placeholder button is rendered to avoid layout shift while keeping an accessible name.
The toggle manages theme locally via the `dark` class; pair it with your own CSS variables or Tailwind dark mode setup.
Install path is `components/ui/theme-toggle.tsx` with the `ThemeToggle` export.