Components

Theme Toggle Effect

Animated transitions when switching between light and dark themes.

Loading…
“

oh I love this one, have to implement it on orcdev.com

”
OrcDevCreator of 8bitcn.com

Browser Compatibility

This component uses the View Transitions API. Check the latest browser compatibility on MDN before using in production.

Installation

Triangle

pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-triangle

Triangle Blur

pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-triangle-blur

Circle

pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-circle

Circle Blur

pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-circle-blur

Circle Blur (Top Left)

pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-circle-blur-top-left

Polygon

pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-polygon

Polygon Gradient

pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-polygon-gradient

Usage

Wrap your theme setter with document.startViewTransition to trigger the effect:

const { setTheme } = useTheme()
 
function toggleTheme(theme: string) {
  if (!document.startViewTransition) {
    setTheme(theme)
    return
  }
 
  document.startViewTransition(() => setTheme(theme))
}

References