Controls & Inputs

Theme Toggle

라이트/다크 테마를 전환하는 간결한 스위치형 토글입니다.

Preview

theme control

Theme Toggle

switch with different transitions

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/toggle-theme.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/toggle-theme.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/toggle-theme.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/toggle-theme.json

typescript

Copied

1import { ToggleTheme } from "@/components/toggle-theme"23export default function Example() {4  return <ToggleTheme />5}

Type: "none" | "circle-spread" | "round-morph" | "swipe-left" | "swipe-up" | "diag-down-right" | "fade-in-out" | "shrink-grow" | "flip-x-in" | "split-vertical" | "swipe-right" | "swipe-down" | "wave-ripple"
Default: "circle-spread"
Description: Lightswind View Transition animation style.

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
duration	number	400	View Transition animation duration in milliseconds.
animationType	"none" \| "circle-spread" \| "round-morph" \| "swipe-left" \| "swipe-up" \| "diag-down-right" \| "fade-in-out" \| "shrink-grow" \| "flip-x-in" \| "split-vertical" \| "swipe-right" \| "swipe-down" \| "wave-ripple"	"circle-spread"	Lightswind View Transition animation style.
variant	"default" \| "glass"	"default"	Visual surface style.
defaultChecked	boolean	false	Initial checked state.
onChange	(checked: boolean) => void	-	Change handler.