# Theme editor for shadcn/ui

> Free shadcn/ui theme editor. Start from a preset, a brand color or an image, check contrast in light and dark, then copy the CSS or install it with the CLI.

Canonical: https://hextaui.com/tools/theme-editor
Last updated: 2026-10-27

Pick a preset, a brand color or an image, and every shadcn/ui token follows in light and dark mode. Edit any color, watch real components update, then copy the CSS or install it with one command.

The editor runs in the browser at https://hextaui.com/tools/theme-editor. Presets: HextaUI, Graphite, Ocean, Violet, Forest, Ember, Rose, Amber, Teal, Indigo, Stone, Inspired by Linear, Inspired by Vercel, Inspired by Supabase, Inspired by Claude, Inspired by Stripe, Inspired by GitHub, Inspired by Notion, Inspired by Spotify.

## How it works

### Start from a preset, a color or an image

Choose one of 19 presets, or pick one brand color and the editor builds the whole palette for both modes. Drop in a logo or screenshot and it picks the brand color for you, in your browser.

### Tune every token

All 38 shadcn/ui color tokens are editable, from background and primary to the five chart colors and the sidebar. Type hex, rgb(), hsl() or oklch(), or use the color picker.

### Check contrast as you go

Each text color shows its WCAG contrast ratio against its surface, with the APCA value on hover. Pairs below 4.5:1 are listed at the top, so you can fix them before you ship.

### Export or share

Copy Tailwind v4 CSS with the @theme inline mapping, copy JSON, or install the theme with the shadcn CLI. The share link holds the whole theme, so there is nothing to save.

## Install a theme

Every theme has a share link and an install command. The command for the default HextaUI theme is `npx shadcn@latest add https://hextaui.com/r/themes/AlCCA-iCAJEAAQABggDNggPZggPKAgSCAhcEAoCEjcERA4CDyaXcA4CIjXo8A4CKyjHqA4IDmgqCAsSAj8o5-4CbSAZfgKeI8tyAbEp7FICbirAIAwECAwQCCgsBAwIDAgMKAoIBDQMRCxEDgLAL8N4CgMYNFe0CgLDKWfICgM8L00wCgwPoCoMD6A-CAiyAm4oZ9w0OgKeJGzQQAgOAeg86VAMRAxYYAA.json`.

## Questions

### Is the theme editor free?

Yes. It is free, needs no account, and runs in your browser. The themes you make are yours to use in any project.

### Does it work with any shadcn/ui project?

Yes. The export uses the standard shadcn/ui CSS variables in OKLCH, so it works with the shadcn/ui components you already have, with HextaUI components, and with any other library built on the same tokens.

### How does the one-color generator keep text readable?

It builds every surface first, then moves each text color lighter or darker until it reaches a WCAG contrast ratio of at least 4.5:1 on its surface. Colors that fall outside sRGB are brought back into range so the hex values match.

### How do I install a theme with the shadcn CLI?

Open Export and copy the command. It runs npx shadcn@latest add with a link to your theme, and the CLI writes the light and dark variables into your CSS file.

### Can I import a theme I already have?

Yes. Paste the :root and .dark blocks from your globals.css, a tweakcn export, or an older shadcn/ui theme written in HSL. Tokens you leave out keep their current values.

### Is my image uploaded anywhere?

No. The image is read on a small canvas in your browser to find its main colors, and it never leaves your device.

## Related

- [All tools](https://hextaui.com/tools)
- [Components](https://hextaui.com/components)
- [Blocks](https://hextaui.com/blocks)