An ui colorgen application built to help you with color setup in shadcn/ui.

Warning This app is currently in beta. See the roadmap below. If you see something broken, you can ping me @miickasmt.

This project is a user interface application designed to facilitate color setup in shadcn/ui. It provides a list of TailwindCSS colors in different formats (hex, rgb, hsl) and allows users to update color variables using a Color Picker. Users can also select their preferred format. Ui colorgen generates variables for root in globals.css and creates the color section for tailwind.config.js.

• List of colors TailwindCSS (hex, rgb, hsl)
• Update colors variables with Color Picker
• Add your own variables in the list
• Select the format that suits you best
• Generate variables for root in globals.css
• Generate colors part for tailwind.config.js
• Import your own variables for update (coming soon)
• Live color preview of shadcn/ui components (coming soon)

• Add documentation part (coming soon)
• Select initial color (slate/gray/zinc/neutral/stone)
• Live color preview of components
• Import own variables from globals.css
• Kamelcase for new variable name with "-"
• Increase UX for "Add Variable" into modal component

A list of things not working right now:

1. Reorder in tailwind.config.js not working if default variable is remove and create again.

If you see something broken, you can ping me @miickasmt.

1. Install dependencies using pnpm:

pnpm install

2. Copy .env.example to .env.local and update the variables.

cp .env.example .env.local

3. Start the development server:

pnpm dev

Licensed under the MIT license.