themux

Overview

themux is an open-source theme customizer for shadcn/ui that supports both Tailwind CSS v4 and v3. Developers start from a preset, adjust tokens with a color picker or by pasting a primary color, check the result against a full set of shadcn components, then copy the generated CSS variables into their project.

The name blends "theming" and "UX," and the interface is inspired by the shadcn/ui and Tailwind CSS websites. The app is built with Next.js 15, React 19 and Tailwind CSS v4, uses Zustand for state and culori for color conversion, and is MIT licensed.

Features

• Tailwind v4 and v3: Generated CSS variables work with either version.
• Color formats: Output the theme in OKLCH, HSL, RGB or HEX.
• Paste a primary color: Build a theme from an existing brand color.
• Token color picker: Edit each theme token individually.
• Presets: Default shadcn/ui bases (neutral, zinc, stone, gray, slate) plus primary and surface presets for background, card and popover.
• Components dump: Preview the theme on the whole collection of shadcn components at once.
• Planned additions: More presets, a typography customizer and a blocks showcase are listed as coming features.

Tech stack

• Next.js 15, React 19, Tailwind CSS v4, shadcn/ui
• Zustand, culori

Getting started

git clone https://github.com/llanesluis/themux.git
cd themux
pnpm install
pnpm dev