Customizing colors

Three of the most common customizations: changing the primary button color, switching the neutral tone, and recoloring the charts. All three flow through the kit’s variable chain — see the Colors overview for how the chain is structured.

The fastest path: shadcn/ui Create plugin (alpha)#

Before diving into the variable collections by hand, consider the shadcn/ui Create plugin — an experimental Figma plugin we ship to all Pro license holders that takes the manual work out of retheming the kit.

You pick a base color (the kit’s neutral tone — Neutral, Stone, Slate, Zinc, Gray), a theme (the primary/accent direction), a chart color, and optional heading and font choices. The plugin then rewrites the kit’s neutrals, shadcn colors, chart colors, and typography collections to match. It does the same variable mappings you’d otherwise build by hand following the steps below — but in seconds, with zero risk of breaking the alias chain. A Reset to defaults button restores the original Neutral/black configuration if you want to start over.

When to use it:

• You’re spinning up a new project and want a starting theme that isn’t the default Neutral/black.
• You want to mirror the exact theme you’ve configured on shadcn/ui Create so Figma and code start in the same place.
• You’re exploring different brand directions and want to swap themes quickly without manually remapping variables each time.

When the manual route below is still the right call:

• Your brand color isn’t covered by the built-in scales and you need to add a new 5-step shadcn/* scale.
• You’re tuning individual tokens (e.g., a slightly darker secondary for muted backgrounds) rather than reskinning wholesale.
• You want to understand the chain before letting a plugin write to it.

Where to get it#

The plugin is available to all Pro license holders through the Downloads Center. After purchase, you’ll have received an email with a link to the Downloads Center and your license key — sign in with that key and you’ll find the shadcn/ui Create plugin alongside the rest of the Pro downloads.

If you can’t find your license key, get in touch and we’ll resend it.

The plugin is also currently under review to be published on the Figma Community, which will give all Pro license holders a one-click install and automatic updates. We’ll update this page with the link as soon as it’s live.

It’s marked alpha because the UI and the set of supported themes are still evolving — feedback welcome via the contact form.

How to change the primary button color#

The primary button uses the primary token in the shadcn colors collection, which points at a 5-step scale from shadcn theme colors.

1. Open the shadcn colors collection and find the primary token (and primary foreground).
2. For both shadcn (light) and shadcn-dark (dark) modes, point primary at a different scale — for example, shadcn/blue/4 in light and shadcn/blue/5 in dark.
3. If primary foreground needs to contrast the new color, update it too (commonly tw-raw/white or a light neutral).

All primary buttons, checkboxes, radios, and focus rings update at once. If none of the built-in shadcn/* scales match your brand, add a new 5-step scale to the shadcn theme colors collection and point primary at it.

How to change the kit’s neutrals#

The kit’s neutral tone (background, foreground, muted, borders, etc.) is driven by the neutrals collection, which contains the 11 theme-neutrals/* values that shadcn colors references.

1. Open the neutrals collection.
2. Remap each theme-neutrals/* value to a different Tailwind neutral scale — for example, point them at tw-raw/stone/*, tw-raw/slate/*, tw-raw/zinc/*, or tw-raw/gray/*.
3. Do this for both shadcn and shadcn-dark modes if you want both themes retinted.

You don’t need to touch shadcn colors at all — every token that references theme-neutrals/* updates automatically.

How to change the chart colors#

The chart colors collection holds 5 values used by chart components. Like primary, they reference the 5-step shadcn theme colors scale so charts stay consistent with shadcn/ui’s charting conventions.

1. Open the chart colors collection.
2. For each chart slot (chart-1 through chart-5), point the value at a different 5-step scale in shadcn theme colors — for example mix shadcn/blue, shadcn/green, shadcn/orange, shadcn/purple, shadcn/red to get a multi-hue chart palette.
3. Update both shadcn and shadcn-dark modes so charts stay readable in both themes.

Every chart component pulls from this collection, so updating it here is enough — no component-level edits needed.