All components
Theme Ripple Toggle
ButtonsReveals the newly themed page through a circle expanding from the button.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/theme-ripple-toggle.jsonOr install manually
1. Install dependencies
pnpm add next-themes motion lucide-react clsx tailwind-merge2. Copy the component source into
components/library/theme-ripple-toggle.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 550 | Milliseconds for the circle to cover the viewport. |
| className | string | - | Classes applied to the button. |
Accessibility
- Honours prefers-reduced-motion by switching instantly with no ripple.
- Browsers without startViewTransition fall back to an instant switch.
- A real <button> with aria-label, so it is reachable and announced.
- Needs four ::view-transition CSS rules - see the comment in the source.
Dependencies
next-themesmotionlucide-reactclsxtailwind-merge