Shadcn Theme Customizer

A tool for generating and customizing themes for shadcn/ui components using Radix UI palette generator
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Current Features
   • Planned Features
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Contributing
4. License
5. Contact

About The Project

Shadcn Theme Generator is a tool that helps you generate and customize themes for shadcn/ui components using Radix UI Custom Colors. Generate Random themes or customize your own with custom colors. Copy the code in different formats to your project.

Current Features

• Interactive theme customization
• Real-time component preview
• Dark/Light mode toggle
• Color palette generation
• Multiple component previews
• Copy code to clipboard in different formats
• Random theme generator

Planned Features

• Advanced customization
• Chart variables
• More component previews
  • Chart component
  • blocks
  • tables
  • inputs and buttons

Getting Started

Installation

1. Clone the repository:

git clone https://github.com/jauharmuhammed/shadcn-theme-generator.git

2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:3000 in your browser

Technologies Used

• Next.js 14
• React
• Radix UI
• Tailwind CSS
• Shadcn/UI
• TypeScript

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Issues

Found a bug or have a feature request? Please file an issue: Create Issue

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• shadcn/ui - Re-usable components built using Radix UI and Tailwind CSS.
• Radix UI - For the color system, palette generator and accessible components.

---

Made with ❤️ by Jauhar Muhammed