Skip to content

Latest commit

 

History

History
76 lines (51 loc) · 2.07 KB

README.md

File metadata and controls

76 lines (51 loc) · 2.07 KB
Raw

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