Preview

Button
Switch
LightDark

Installation

<> import.ts
import { ThemeToggle } from "@/components/ui/theme-toggle"

Code

<> component.tsx
import { ThemeToggle } from "@/components/ui/theme-toggle"

<ThemeToggle />

API Reference

ThemeToggle

Toggle between light and dark themes using a button or switch.

<> import.ts
import { ThemeToggle } from "@/components/ui/theme-toggle"

Props

PropTypeDefaultDescription
variant
"button" | "switch""button"Render as icon button or as a labeled switch
size
"sm" | "md" | "lg""md"Control size (switch/button)
className
string""Additional classes
lightIcon
React.ReactNode—Custom icon for light theme
darkIcon
React.ReactNode—Custom icon for dark theme
leftLabel
string—Left label for switch variant
rightLabel
string—Right label for switch variant

Examples

Example 1
<> example.tsx
// Icon button
<ThemeToggle />
Example 2
<> example.tsx
// Switch with labels
<ThemeToggle variant="switch" leftLabel="Light" rightLabel="Dark" />