Web app
shadcn/ui theme editor
A web app for shaping a shadcn/ui colour theme and seeing it applied to real components before you copy it.
What it is
An editor for the colour tokens behind a shadcn/ui theme. A side panel lists the swatches, a preview shows the components wearing them, and light and dark mode are one toggle apart.
It's a side project. I started it in October 2023 and rewrote it from scratch in June 2024 to keep it clean enough for others to contribute to.
Why I built it
shadcn/ui themes are CSS variables, and the only way to see a change is to edit the variables and reload. I wanted to change a token and watch the whole interface respond.
- 19commits, Oct 2023 to Jul 2024
- 60TypeScript and TSX source files
- 2preview tabs: a home layout and a blocks gallery
How it's built
The theme lives in a Redux Toolkit slice, so every swatch edit updates one source of truth and the preview re-renders from it. The UI is built from Radix primitives and the same shadcn/ui components it themes, which means the preview is the real thing rather than a mock-up. Colour conversion runs through a small colour library.
Contributing
The README is still short, and I'd like to finish it. The code is organised so a new preview block or a new token group is a small, self-contained change. Issues and pull requests are welcome on GitHub.
What I'd change
I'd add export in the formats people paste into a project, and move the app off Redux for something lighter. A theme is small enough that a single store is more than it needs.
Need someone who owns a feature from the first call to the last deploy?
I'm open to senior software, full-stack and forward deployed roles, in India or abroad. A 15-minute call is the quickest way to see if we fit.