f-ui

Light, dark, and system theme picker built on shadcn Select with sun, moon, and monitor icons.

Theme Mode Selector is a controlled three-way picker (light / dark / system) built on shadcn Select. It does not import next-themes; connect value / onValueChange from useTheme() or your own store.

Next Themes

Mount ThemeProvider from next-themes at your app root when you integrate outside Fumadocs. This component only renders UI; it does not depend on next-themes at import time.

Installing

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/theme-mode-selector.json

npx shadcn@latest add https://ui.isaacfei.com/r/theme-mode-selector.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/theme-mode-selector.json

bun x shadcn@latest add https://ui.isaacfei.com/r/theme-mode-selector.json

With a namespace: npx shadcn@latest add @f-ui/theme-mode-selector — pulls lucide-react and registry select.

Usage

import { ThemeModeSelector } from '@/components/f-ui/theme-mode-selector';
import { useTheme } from 'next-themes';

function NavTheme() {
  const { theme, setTheme } = useTheme();
  return (
    <ThemeModeSelector
      value={(theme as 'light' | 'dark' | 'system') ?? 'system'}
      onValueChange={setTheme}
      ariaLabel="Theme"
    />
  );
}

Translated labels:

<ThemeModeSelector
  value={theme}
  onValueChange={setTheme}
  options={[
    { value: 'light', label: '浅色' },
    { value: 'dark', label: '深色' },
    { value: 'system', label: '跟随系统' },
  ]}
/>

Examples

Current: —

"use client";

import { useTheme } from "next-themes";

import { ThemeModeSelector } from "@/components/f-ui/theme-mode-selector";

export function ThemeModeSelectorDemo() {
  const { theme, setTheme } = useTheme();
  const value =
    theme === "light" || theme === "dark" || theme === "system"
      ? theme
      : "system";

  return (
    <div className="max-w-sm space-y-3">
      <ThemeModeSelector
        value={value}
        onValueChange={setTheme}
        ariaLabel="Theme"
      />
      <p className="text-muted-foreground text-xs">
        Current:{" "}
        <span className="text-foreground font-medium tabular-nums">{theme ?? "—"}</span>
      </p>
    </div>
  );
}

Composition

Select with Sun / Moon / Monitor on the trigger and one SelectItem per mode.

API Reference

Prop	Type	Default
`value`	`"light" \| "dark" \| "system"`	—
`onValueChange`	`(value: ThemeMode) => void`	—
`options`	`ThemeModeOption[]`	Light / Dark / System
`ariaLabel`	`string`	`"Select theme"`
`className`	`string`	—

Theme Mode Selector

Installing

Usage

Examples

Composition

API Reference

On this page