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 @grootstudio/theme-togglerUsage
1
Import the component
2
Use like this
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