Theme Toggle
View Transition API theme switch with circle, blur, rectangle, and polygon reveals.
19.3 KB
•Updated on September 3, 2026
The demo lets you pick variant, start origin, and blur, then click the button. Source: registry/components/spaceui/theme-toggle/index.tsx. It uses next-themes and injects ::view-transition-* CSS before document.startViewTransition.
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-theme-toggleRequires next-themes and a theme provider already in the app.
Usage
Code
import { ThemeToggleButton } from '@/components/spaceui/theme-toggle'
export default function SpaceUI() {
return <ThemeToggleButton variant="circle" start="top-left" blur size="lg" />
}Code
const { isDark, toggleTheme } = useThemeToggle({ variant: 'rectangle', start: 'left-right' })Files
| File | Role |
|---|---|
theme-toggle/index.tsx | createAnimation, useThemeToggle, ThemeToggleButton |
API Reference
ThemeToggleButton / useThemeToggle
| Prop | Type | Default | Description |
|---|---|---|---|
variant | circle|circle-blur|rectangle|polygon | circle | Reveal shape |
start | center|top-left|… | center | Clip origin (depends on variant) |
blur | boolean | false | Blur during the reveal |
size | xs|sm|md|lg|xl | md' (icon) | Square button size |
buttonVariant | outline|secondary|default|ghost | secondary | Primitive button visual style |
className | string | — | Button class (button only) |
useThemeToggle also returns toggleTheme, setCrazyLightTheme, setCrazyDarkTheme, setCrazySystemTheme, and isDark.
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.