themux

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.

Features

• ✅ 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

Coming Features

• ⌚ More presets
• ⌚ Typography customizer and typography dump
• ⌚ Blocks showcase

Fun Fact

The name "themux" blends "theming" and "UX" to highlight its focus on both aesthetic design and user experience.

Run Locally

Prerequisites

• Node.js 20+
• npm / yarn / pnpm

Installation

1. Clone the repository:

git clone https://github.com/llanesluis/themux.git
cd themux

2. Install dependencies:

pnpm install

3. Start the dev server:

pnpm dev

4. Open http://localhost:3000 in your browser.

License

Licensed under the MIT license.