build69
Sign inGet API key
build69  /  Components  /  Navigation  /  AccentPicker

AccentPicker

v1.0.3Updated 27 Aug 2026

Brand-accent swatch row that switches the data-theme accent (orange/blue/green/violet/rose). Controlled, or self-persisting to localStorage. Each swatch renders its real primary token — no hardcoded color.

View source← Back to catalog

Preview

Live · 7 stories
DefaultOpen ↗
▸Why this is recommendedaccentbrand-themecolorswatch+3

The default, out-of-the-box AccentPicker.

Recommended for+14
  • ✓Settings > appearance
  • ✓Theme submenu inside ThemeToggle
  • ✓Whitelabel accent selection
Tags+6
accentbrand-themecolorswatchdata-themenavigationdefault
Features+4
  • 5 built-in accents (or a custom set)
  • Controlled or uncontrolled (self-persists to localStorage)
  • Token-only swatches via element-scoped data-theme
  • Keyboard + ARIA radiogroup
  • i18n: labels prop overrides the group aria-label and accent names; merged over DEFAULT_ACCENT_PICKER_LABELS
Not recommended for−2
  • ✕Arbitrary color selection (use ColorPicker)
  • ✕Non-brand palettes

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "AccentPicker" })

Usage

import { AccentPicker } from '@/components/navigation/accent-picker';

<AccentPicker />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Controlled active accent

string—
defaultValue

Uncontrolled initial accent

string—
onValueChange

Called with the chosen accent value

function—
themes

Selectable accents (default 5 built-ins)

AccentOption[]—
persist

Uncontrolled: write data-theme on <html> + localStorage (default true)

boolean—
labels

Override built-in UI strings (i18n): group aria-label + accent names. Merged over DEFAULT_ACCENT_PICKER_LABELS

Partial<AccentPickerLabels>—

Related

Platform docsAll componentsSource files