Drop-in theme editor for shadcn/ui

A live theme panel
for your shadcn project.

Like Radix UI's <ThemePanel />, but built on shadcn primitives and OKLCH variables. Install in one CLI command, mount once, ship.

View source

Install

AloneDay-91/theme-panel-shadcn-ui
$ npx shadcn@latest add https://theme-panel-shadcn-ui.vercel.app/r/theme-panel.json

Then mount <ThemePanel /> once in your root layout. That's it.

Press T to toggle the panel

Every shadcn primitive, live-themed

Open the panel and watch every component update in real time.

Charts

Recharts wired to your tokens

Series colors come from --chart-1..5

Sessions
+12.4k
+5.2% vs last 6 months
Revenue
$84,210
+18.4% MoM
Growth
5,240
-2.1% week-over-week
Streams by platform
152k
SpotifyAppleYouTubeTidal

Data & forms

Tables, inputs, controls

Surface, ring, primary, and border tokens at work

Members
5 people in this workspace
UserRoleStatus
AC
Alex Carter
alex@example.com
AdminActive
MS
Maya Singh
maya@example.com
EditorActive
JL
Jordan Lee
jordan@example.com
ViewerInvited
SR
Sam Rivera
sam@example.com
EditorActive
PP
Priya Patel
priya@example.com
AdminSuspended
5 of 24 members
Payout threshold
Set the minimum balance required before a payout is triggered.
$2,500.00
$50 (min)$10,000 (max)
Savings targets
Active milestones
Retirement+5.2%
$420,000
65% achieved
Real estate-1.8%
$85,000
32% achieved
Recent transactions
Your latest activity
B
Blue Bottle
Food & coffee
-$12.40
W
Whole Foods
Groceries
-$84.32
S
Stripe Inc
Income
+$2,490.00
♫
Spotify
Subscription
-$11.99
Pick a plan
Cancel anytime, billed monthly

Overlays

Dialogs, sheets, popovers, command palette

All anchored to the popover and card tokens

Dialog
Modal for focused actions
Command palette
Press ⌘K to open
Date picker
Calendar in a popover
Hover card
Rich preview on hover
Sheet
Slide-out side panel
AlertDialog
Confirmation for irreversible actions

Feedback & inputs

Alerts, toasts, accordions, multi-state controls

Alerts
Inline status messages
Toasts
Sonner toaster, theme-aware
Loading states
Skeletons + progress

13% — building registry…

Accordion
Frequently asked

Every CSS variable shadcn ships with — colors, radius, charts, sidebar, with persistence.

Selectors
Checkbox · Radio · Switch · Tabs
Toggle group
Multi-state segmented control