Search Themes

Search for themes and categories

mickasmt's avatar

UI Colorgen

by mickasmt

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

221
Aug 27, 2024
open-source
UI Colorgen screenshot

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.