Overview:
UI Colorgen is a user interface application designed to ease the process of color setup in the shadcn/ui project. It offers a variety of TailwindCSS colors in different formats and enables users to update color variables using a Color Picker. Users can choose their preferred format and generate variables for root in globals.css and color sections for tailwind.config.js.
Features:
- List of colors: TailwindCSS colors available in hex, rgb, and hsl formats.
- Update colors variables: Modify color variables using a Color Picker.
- Add custom variables: Users can include their own variables in the list.
- Select initial color: Choose an initial color for variables.
- Choose format: Select the preferred format for color representation.
- Generate variables: Automatically create variables for root in globals.css.
- Generate color section: Facilitates generating the color section for tailwind.config.js.
Installation:
To run UI Colorgen locally, follow these steps:
- Install dependencies using pnpm:
pnpm install
Copy .env.example to .env.local and update the variables as needed.
Start the development server:
pnpm run dev
Summary:
UI Colorgen is a useful tool for managing color setups in the shadcn/ui project. With features like a list of colors, color variable updates, customization options, and easy generation of CSS variables, it simplifies the color configuration process. By following the installation guide, users can easily set up and utilize UI Colorgen for enhanced color management.