All components
Theme Toggle
ButtonsSun and moon segments with a thumb that glides between them.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/theme-toggle.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/theme-toggle.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "light" | "dark" | "light" | Initial mode. |
| onChange | (mode: "light" | "dark") => void | - | Called with the new mode on selection. |
Accessibility
- Each segment has an aria-label and aria-pressed, so state is announced.
- Wrapped in role=group with an aria-label naming the control.
- The gliding thumb uses layoutId, so it animates without re-rendering icons.
Dependencies
motionclsxtailwind-mergelucide-react