Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Max-Samson/magicui/llms.txt

Use this file to discover all available pages before exploring further.

A beautifully animated theme toggler that smoothly transitions between light and dark modes using the View Transitions API.

​
Installation

npx shadcn@latest add @magicui/animated-theme-toggler

​
Required CSS

Add the following to your global CSS file: 
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

​
Usage

import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"

export default function Example() {
  return <AnimatedThemeToggler />
}

​
Props

​
className
string
default:""
Additional CSS classes to apply to the button
​
duration
number
default:"400"
Duration of the theme transition animation in milliseconds

​
Features

  • Smooth circular reveal animation during theme transitions
  • Automatic theme detection and sync with document theme
  • Persists theme preference to localStorage
  • Uses View Transitions API for modern browsers
  • Fully accessible with screen reader support

​
Credits

Created by Nazam Kalsi

Build docs developers (and LLMs) love

Get started for freeTalk to us