Themepicker

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download theme-picker -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { ThemeProvider } from "@/components/ui/theme-provider";
import { ThemePicker } from "@/components/ui/theme-picker";
<ThemeProvider defaultTheme="system">
  <ThemePicker />
</ThemeProvider>;

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Examples

Default

import { ThemeProvider } from "@/components/ui/theme-provider";
import { ThemePicker } from "@/components/ui/theme-picker";
<ThemeProvider defaultTheme="system">
  <ThemePicker />
</ThemeProvider>;

In Toolbar

import { ThemeProvider } from "@/components/ui/theme-provider";
import { ThemePicker } from "@/components/ui/theme-picker";
<ThemeProvider defaultTheme="system">
  <div className="flex items-center gap-2 rounded-md border p-2">
    <span className="text-sm text-neutral-mid">Appearance</span>
    <ThemePicker />
  </div>
</ThemeProvider>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

This component adds no props of its own to Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.