https://github.com/mickasmt/ui-colorgen

An application designed to assist you with color configuration of shadcn/ui !
https://github.com/mickasmt/ui-colorgen

color-picker nextjs14 radix-ui shadcn-ui tailwindcss typescript vercel

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mickasmt/ui-colorgen
• Owner: mickasmt
• License: mit
• Created: 2023-07-18T11:39:07.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-04T21:28:11.000Z (7 months ago)
• Last Synced: 2024-08-01T22:52:02.882Z (5 months ago)
• Topics: color-picker, nextjs14, radix-ui, shadcn-ui, tailwindcss, typescript, vercel
• Language: TypeScript
• Homepage: https://ui-colorgen.vercel.app
• Size: 2.18 MB
• Stars: 196
• Watchers: 2
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-shadcn-ui - UI Colorgen - An application designed to assist you with color configuration of shadcn/ui. (Colors And Customizations)
• awesome-shadcn-ui - UI Colorgen - An application designed to assist you with color configuration of shadcn/ui. (Colors And Customizations)

README

        
# UI Colorgen

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

![hero](public/og.jpg)

## About this project

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.

## Features

- List of colors **TailwindCSS** (hex, rgb, hsl)

- Update colors variables with **Color Picker**

- Add your **own variables** in the list 

- **Select initial color** for your variables

- **Select the format** that suits you best

- **Generate variables** for root in `globals.css`

- **Generate colors part** for `tailwind.config.js`

## Running Locally

1. Install dependencies using pnpm:

```sh

pnpm install

```

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

```sh

cp .env.example .env.local

```

3. Start the development server:

```sh

pnpm dev

```

## License

Licensed under the [MIT license](https://github.com/mickasmt/ui-colorgen/blob/main/LICENCE.md).