Components/Components
Theme Toggler
A minimal theme toggle button with a cinematic full-screen curtain wipe animation. Supports vertical and horizontal directions.
themedark-modetoggle
Preview
Installation
npx shadcn@latest add https://grootstudio.vercel.app/r/theme-toggler.jsonUsage
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| direction | 'vertical' | 'horizontal' | 'vertical' | Direction of animation: Vertical sweeps top-to-bottom, horizontal sweeps left-to-right. | |
| duration | number | 550 | Duration of animation in milliseconds. | |
| defaultTheme | 'light' | 'dark' | 'light' | Initial theme. Auto-detected from the document's dark class. | |
| onThemeChange | (theme: Theme) => void | | Callback fired after the theme change animation completes. | |
| className | string | | Additional Tailwind classes for custom styling. |
Dependencies
lucide-react