# Accent Picker

- Page: <https://kznlabs.github.io/labsUI/components/accent-picker>

## Accent Picker (`accent-picker`, component)

Accent color row: eight swatches (red to slate) that retint primary, focus rings, selection, switches and checkboxes app-wide. Persisted, applied before paint, or set your own hue with --accent-hue.

- Install: `npx @kznlabs/labsui add accent-picker`
- Docs: <https://kznlabs.github.io/labsUI/components/accent-picker>
- Brings: theme, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<AccentPicker>`: Accent color row: radio swatches that retint the whole app via `setAccent()`.

### Usage

```tsx
<AccentPicker />
```

### Example: appearance-settings.tsx

```tsx
import { AccentPicker } from "@/components/ui/accent-picker";
import { ThemeToggle } from "@/components/ui/theme-toggle";

export function AppearanceSettings() {
  return (
    <section aria-labelledby="appearance" className="grid gap-3">
      <h2 id="appearance" className="font-medium">Appearance</h2>
      <div className="flex items-center justify-between">
        <span className="text-sm">Theme</span>
        <ThemeToggle />
      </div>
      <div className="flex items-center justify-between">
        <span className="text-sm">Accent color</span>
        <AccentPicker />
      </div>
    </section>
  );
}
```

### Example: brand-accent.ts

```ts
import { setAccent } from "@/lib/theme";

// One of the presets, persisted and applied before paint on the next visit:
setAccent("green");

// Or your own color, in CSS: :root { --accent-hue: 160; --accent-chroma: 0.15; }
```