https://github.com/iamlite/shadcn-theme-designer
Shadcn UI Theme Designer - Generate themes based on input color, generate random themes and edit existing themes. 100% WCAG compliance powered by color-core for all theme generations.
https://github.com/iamlite/shadcn-theme-designer
colors design radix-ui shadcn shadcn-ui shadcnui theme ui ux
Last synced: 3 months ago
JSON representation
Shadcn UI Theme Designer - Generate themes based on input color, generate random themes and edit existing themes. 100% WCAG compliance powered by color-core for all theme generations.
- Host: GitHub
- URL: https://github.com/iamlite/shadcn-theme-designer
- Owner: iamlite
- Created: 2024-10-08T18:06:12.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-17T02:33:48.000Z (5 months ago)
- Last Synced: 2025-02-26T05:54:03.247Z (3 months ago)
- Topics: colors, design, radix-ui, shadcn, shadcn-ui, shadcnui, theme, ui, ux
- Language: TypeScript
- Homepage: https://shadesigner.com
- Size: 1.69 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shadcn Theme Designer
A simple tool to help you create color palettes for shadcn/ui. Easily customize your theme colors, preview changes in real-time, and export your palette for seamless integration with your projects.
## Features
- Generate random color palettes
- Customize individual color variables
- Preview changes in real-time
- Export your palette as CSS
- Apply preset themes
- Toggle between light and dark modes
- Adjust border radius
- Boost saturation
- Set custom primary color
## Getting Started
### Prerequisites
- Node.js (version 14 or higher)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/shadcn-theme-designer.git
```
2. Navigate to the project directory:
```bash
cd shadcn-theme-designer
```
3. Install dependencies:
```bash
pnpm install
```
4. Start the development server:
```bash
pnpm run dev
```
5. Open your browser and visit `http://localhost:3000`
## Usage
1. Use the color pickers to adjust individual color variables
2. Click "Generate Random Palette" to create a new random color scheme
3. Apply preset themes using the preset buttons
4. Toggle between light and dark modes to preview your theme
5. Adjust the border radius using the radius slider
6. Use the "Boost Saturation" toggle to enhance color vibrancy and tint backgrounds & borders slightly.
7. Set a custom primary color to base your palette on
8. Click "Show CSS Output" to view and copy the generated CSS variables
## Built With
- [Next.js](https://nextjs.org/)
- [React](https://reactjs.org/)
- [shadcn/ui](https://ui.shadcn.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Color-core](https://www.npmjs.com/package/color-core)
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- [shadcn/ui](https://ui.shadcn.com/) for the excellent component library
- [Geist Font](https://vercel.com/font) by Vercel for the typography
- [color-core](https://www.npmjs.com/package/color-core) for color manipulation (by me :D)