Skip to content

Theme Toggle

A smooth animated theme switcher using next-themes and Framer Motion.

Installation

pnpm dlx shadcn@latest add theme-toggle --component

Props

PropTypeRequiredDefaultDescription
classNamestringNoOptional class name to style the button

Usage

1"use client";2
3import ThemeToggle from "@/components/ui/theme-toggle";4
5export default function Page() {6  return (7    <div className="flex min-h-screen items-center justify-center bg-neutral-100 dark:bg-neutral-900">8      <ThemeToggle />9    </div>10  );11}

Features

  • Works with next-themes provider
  • Framer Motion animations for smooth transitions
  • Icons morph, rotate, and fade between states
  • Full light/dark mode support
  • Accessible with aria-label
PreviousTestimonial Carousel

Build your next big idea with us

From lightning-fast landing pages to fully functional SaaS products, we turn your vision into reality. Book a call today and let's make something extraordinary.

Book Free ConsultationContact Us

“They transformed our idea into a fully functional product in record time. Couldn't be happier!”

Alex Chen

Founder, StartupX

“The team's attention to detail and design expertise set our product apart in the market.”

Sarah Kim

CTO, Innovate Inc