More Premium Hugo Themes Premium React Themes

UI Colorgen

An application designed to assist you with color configuration of shadcn/ui !

UI Colorgen

An application designed to assist you with color configuration of shadcn/ui !

Author Avatar Theme by mickasmt
Github Stars Github Stars: 221
Last Commit Last Commit: Jun 4, 2024 -
First Commit Created: Aug 27, 2024 -
default image

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:

  1. Install dependencies using pnpm:
pnpm install
  1. Copy .env.example to .env.local and update the variables as needed.

  2. 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.