Theme editor for shadcn/ui

Assistant
Weekly signups
Beta
Summarize this week’s signups and flag anything odd.
Up 18% on last week. Tuesday spiked after launch, and 42 came from one referrer.
signups.csv1 anomaly
Notifications
MR
Maya Ross invited you to Launch

2m ago

JL
Jon Lee approved your pull request

1h ago

AK
Ana Kim commented on Pricing v2

3h ago

Pro plan
Popular

$19per seat / month

  • Unlimited projects
  • Assistant with 50k requests
  • Priority support

Cancel anytime. No card for the trial.

Requests
This month, all models
+12.4%

128,420

  • Chat42%
  • Search24%
  • Agents16%
  • Vision11%
  • Audio7%
DefaultPaidSyncingReviewFailedDraft
Book a demo
30 minutes with our team.
October 2026
New API key
Keys can call every model you enable.
Expires

How it works

  1. 1

    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.

  2. 2

    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.

  3. 3

    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.

  4. 4

    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.

Use it with HextaUI

Every HextaUI component reads these tokens, so a theme you make here restyles the whole library. The same goes for HextaUI Pro blocks: switch the preview to Pro blocks to see your theme on a chat thread, settings pages and a commerce dashboard before you buy.

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.