Accent Picker · paneui

Installation

pnpm dlx shadcn@latest add @paneui/accent-picker

Usage

import { AccentPicker, AccentPresets } from "@/components/ui/accent-picker"

// once, near the top of your root layout's <body>
<AccentPresets />

// in your appearance settings
<AccentPicker showLabels />

How it works

It sets data-accent on <html> (blue, the default, has no attribute) and stores the pick in localStorage["accent"]. The preset roles ship inside the component as CSS and are injected once, so it works in any app with @paneui/theme. AccentPresets renders that CSS plus a pre-paint script so a reload never flashes the default.

Custom control

useAccent() returns [accent, setAccent] for a menu or select of your own.

API Reference

Built on the Radio Group primitive. Only the props this library adds or changes are listed; everything else passes through.

AccentPicker

Also accepts every prop of RadioGroup.

accents= all six: Accent[]; Presets to offer, from blue, neutral, green, orange, rose and violet.
showLabels= false: boolean; Names under the swatches.

Prop	Type	Default	Description
accents	Accent[]	all six	Presets to offer, from `blue`, `neutral`, `green`, `orange`, `rose` and `violet`.
showLabels	boolean	false	Names under the swatches.

useAccent

Returns [accent, setAccent], kept in sync across pickers and tabs.

AccentPresets

<style> with the presets plus a pre-paint script.