Shadcn-UI Theme Generator and Editor

Overview

This project is a powerful and intuitive theme generator and editor for Shadcn-UI components. It allows users to create, customize, and preview themes for their Shadcn-UI based projects in real-time. With a user-friendly interface and a wide range of customization options, this tool streamlines the process of creating unique and visually appealing themes for your Next.js applications.

Features

• Real-time theme preview
• Customizable color schemes
• Dark and light mode support
• Export themes as CSS and Tailwind config
• Randomize theme colors
• Lock specific colors while generating new themes
• Responsive design for various screen sizes

Tech Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• Shadcn-UI components
• Bun (for package management and running scripts)

Getting Started

Prerequisites

• Node.js (v14 or later)
• Bun (latest version)

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/shadcn-ui-theme-generator.git
   cd shadcn-ui-theme-generator

2. Install dependencies:

   bun install

3. Start the development server:

   bun run dev

4. Open your browser and navigate to http://localhost:3000 to access the theme generator.

Usage

1. Use the controls in the sidebar to adjust theme colors and properties.
2. Preview the changes in real-time on the main content area.
3. Lock specific colors to keep them constant while generating new themes.
4. Click the "Randomize Colors" button to generate a new random theme.
5. Export your theme as CSS and Tailwind config using the "Export" tab.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

Acknowledgments

• Shadcn-UI for the excellent component library
• Next.js for the React framework
• Tailwind CSS for the utility-first CSS framework