Command Palette

Search for a command to run...

Theme Switcher/Theme Switcher Switch

Theme Switcher Switch

Switch-based theme switcher with animated sun/moon icons

Open in v0

Overview

Clean toggle switch component for switching between light and dark themes. Features smooth animations and clear visual states.

Installation

npx shadcn@latest add @elements/theme-switcher-switch

Usage

import { ThemeSwitcherSwitch } from "@/components/theme-switcher-switch";

export function PreferencesForm() {
  return (
    <div className="flex items-center justify-between">
      <span>Dark Mode</span>
      <ThemeSwitcherSwitch />
    </div>
  );
}

Features

  • Toggle switch UI pattern
  • Smooth slide animation
  • Binary light/dark selection
  • Accessible switch component