ThemePicker

Three radio-selectable cards — Light, Dark, System — each with a small preview of what that option's chrome looks like. Measured live at app.attio.com/<ws>/settings/appearance (Settings -> Appearance -> Theme): 224x152 tiles, 16px radius, an 8px row gap, a brand-blue border when selected. "System" mirrors the OS's own effective scheme (prefers-color-scheme), the same way this session's own System tile matched whatever the OS/browser reported rather than a fixed half-and-half illustration.

Strictly controlled — pass value and onChange, no uncontrolled variant.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { useState } from "react";
import { ThemePicker, type ThemePickerValue } from "@crisp-ui-kit/crisp";

function AppearanceSettings() {
  const [theme, setTheme] = useState<ThemePickerValue>("system");
  return <ThemePicker value={theme} onChange={setTheme} aria-label="Theme" />;
}

Override one or more of the three labels (each falls back to its English default, translated through CrispMessagesProvider if one is mounted):

<ThemePicker
  value={theme}
  onChange={setTheme}
  aria-label="Theme"
  labels={{ light: "Цайвар", dark: "Бараан", system: "Систем" }}
/>

Props