FreeInteractive

Theme Switcher Card

Use this component in settings pages, onboarding flows, theme pickers, and profile preference panels.

ReactTailwind CSSMotionTheme

Overview

A toggle card that switches between light and dark states with a smooth thumb animation.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ThemeSwitcherCard />

Theme Switcher Card.tsx

tsx

"use client";

import { useState } from "react";
import { motion } from "framer-motion";

export function ThemeSwitcherCard() {
  const [enabled, setEnabled] = useState(true);

  return (
    <button
      type="button"
      onClick={() => setEnabled(!enabled)}
      className={"flex w-64 items-center justify-between rounded-full border p-2 " + (enabled ? "border-white/10 bg-zinc-950 text-white" : "border-slate-200 bg-slate-100 text-slate-900")}
    >
      <span className="pl-3 text-sm font-semibold">{enabled ? "Dark mode" : "Light mode"}</span>
      <motion.span layout className={"h-10 w-10 rounded-full " + (enabled ? "bg-lime-300" : "bg-white")} />
    </button>
  );
}