Theme Toggle

grettech

A beautiful animated theme toggle with spring animations.

Props

Prop	Type	Default	Description
showThemeName	boolean	false	Whether to display the text label for the active theme alongside the icon.

Usage Examples

With Theme Name

import { ThemeToggle } from "@/components/theme-toggle";
export default function WithNameExample() {
  return (
    <div className="flex gap-4 p-4">
      <ThemeToggle showThemeName={true} />
    </div>
  );
}

Key Features

Keyboard shortcut support
Spring animations using Framer Motion
Accessible ARIA attributes
System theme detection

NextPrompt Dialog