themux brings great UX to theming. A (yet another) theme customizer for shadcn/ui supporting Tailwind v4. Comes with default presets to get started and offers advanced customization options for every aspect of your UI. Just begin tweaking your theme, then copy-paste the generated CSS variables into your code. Use this to make your shadcn components stand out.
Heavily inspired by shadcn/ui and Tailwind CSS website designs.
- ✅ Compatible with Tailwind v4 and v3
- ✅ Generate your theme in OKLCH, HSL, RGB or HEX color formats
- ✅ Paste your primary color
- ✅ Token color picker
- ✅ Default shadcn/ui presets (neutral, zinc, stone, gray, slate)
- ✅ Primary and surface presets (background, card, popover, etc.)
- ✅ Components dump with the whole collection of shadcn components to see the results up-front
- ⌚ More presets
- ⌚ Typography customizer and typography dump
- ⌚ Blocks showcase
The name "themux" blends "theming" and "UX" to highlight its focus on both aesthetic design and user experience.
- Node.js 20+
- npm / yarn / pnpm
- Clone the repository:
git clone https://github.com/llanesluis/themux.git
cd themux
- Install dependencies:
pnpm install
- Start the dev server:
pnpm dev
- Open http://localhost:3000 in your browser.
Licensed under the MIT license.