Theme Switch

A flexible and accessible theme mode switcher component

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/theme-switch.json

Usage

import { ThemeSwitch } from "@/components/ui/theme-switch";
import { Sun, Moon, Laptop } from "lucide-react";
<ThemeSwitch
  modes={["light", "dark", "system"]}
  icons={[
    <Sun key="sun-icon" size={16} />,
    <Moon key="moon-icon" size={16} />,
    <Laptop key="laptop-icon" size={16} />,
  ]}
  showInactiveIcons="all"
/>

Examples

Hide Inactive

Show Only Next

Three Mode Show Only Next

Three Mode with any Icon Click

Single Centred with Two modes

Single Centred wit Three modes

API Reference

ThemeSwitch

A flexible and accessible theme mode switcher component for Next.js projects using next-themes. Supports multiple modes (e.g., light, dark, system), custom icons, and various display options.

Props

PropertyTypeDefaultDescription
modesstring[]["light", "dark", "system"]
Available theme modes to cycle through.
iconsReactNode[][]
Icons representing each mode (same order as `modes`).
showActiveIconOnlybooleanfalse
Show only the active icon centered.
showInactiveIcons"all" | "none" | "next""all"
How inactive icons are shown.
classNamestring—
Optional class for styling the switch container.
...propsHTMLDivElement attributes—
Additional props passed to the root div.

Behavior

  • Clicking the switch cycles to the next mode in the modes array.
  • Icons are displayed according to showActiveIconOnly and showInactiveIcons props.
  • Animated indicator highlights the current mode.
  • Accessible: Uses button-like semantics and focus styles.

Changelog

2025-06-02 ThemeSwitch - icon-click Variant

Added a new variant="icon-click" prop to the ThemeSwitch component that allows users to directly select a theme by clicking on its corresponding icon.

This provides a more intuitive UX compared to the default sequential toggle.

Use this variant when you want users to set the theme directly instead of cycling through options.

Add the variant prop as shown below:

ThemeSwitch.tsx

<ThemeSwitch
  variant="icon-click"
  modes={["light", "dark", "system"]}
  icons={[
    <Sun key="sun-icon" size={16} />,
    <Moon key="moon-icon" size={16} />,
    <Laptop key="laptop-icon" size={16} />,
  ]}
  showInactiveIcons="all"
/>

Built withby Ahdeetai.