Theme Toggler

A theme toggle button with animated transitions using clip-path masks. It supports various shapes and can expand from the center or button position. Use it to switch between light and dark themes with visual effects.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/theme-toggler

npx layro-cli add @magicuidesign/theme-toggler

npx layro-cli add @magicuidesign/theme-toggler

bunx layro-cli add @magicuidesign/theme-toggler

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import { Moon, Sun } from "lucide-react"
import { flushSync } from "react-dom"

import { cn } from "@/lib/utils"

export type TransitionVariant =
  | "circle"
  | "square"
  | "triangle"
  | "diamond"
  | "hexagon"