Brand Color Settings Panel React component
A theme editor for a product's brand: primary and accent colors with a picker, hex field and presets, an 11-step scale generated from the primary, a live contrast check for text on the brand color, a corner radius slider, and a light and dark preview of real UI that updates as you edit. Copy the CSS variables or save the theme.
About the Brand Color Settings Panel component
Brand Color Settings Panel lets a team set their product's look in one place: a primary color, an accent and a corner radius. It builds a full color scale from the primary and shows real buttons, charts and inputs in light and dark as you edit.
It also keeps the result usable. A contrast check tells you whether text on your brand color is readable, naming the WCAG level it reaches, and the finished theme can be copied as CSS variables or saved.
When to use it
Use it in white-label products, client portals, site builders and any app where customers bring their own brand colors.
Pair it with CSS variables in your app so the saved scale and radius apply everywhere at once.
Installation
Add the Brand Color Settings Panel component to your project with the shadcn CLI. It lands in components/brand-color-settings-panel.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/brand-color-settings-panelOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<BrandColorSettingsPanel /> accepts 4 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| defaultValue | object | DEFAULT |
| defaultValue.primary* | string | — |
| defaultValue.accent* | string | — |
| defaultValue.radius* | number | — |
| onSave | (theme: BrandTheme & { scale: Record<string, string> }) => Promise<void> | void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- defaultValueobjectDefault: DEFAULT
- defaultValue.primary*string
- defaultValue.accent*string
- defaultValue.radius*number
- onSave(theme: BrandTheme & { scale: Record<string, string> }) => Promise<void> | void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Brand Color Settings Panel FAQ
- How is the scale generated?
- The primary's hue and saturation are kept and placed on a fixed lightness ladder from 50 to 950. The step closest to your chosen color is marked so you know where it sits.
- What does the contrast check measure?
- It picks white or black text, whichever reads better on your primary, and shows the WCAG contrast ratio. 4.5:1 passes AA for normal text, 3:1 passes for large text, and 7:1 reaches AAA.
- Why does a hex field turn red?
- Hex values need six digits after #. The preview only updates with valid values, and leaving the field restores the last valid color.
- Can I export the theme?
- Copy CSS variables puts the radius, accent and every scale step in a :root block on your clipboard. onSave receives the same values, including the scale, to store with the workspace.
- Is it accessible?
- Color pickers, hex fields and the radius slider are labelled, presets and preview mode are radiogroups, invalid hex values use aria-invalid, and the contrast result is announced as it changes.
