Theme Wizard is an interactive design tool built with Next.js 13 that empowers designers and developers to discover and fine-tune the theme for their next project. Whether you're working with Tailwind CSS or Shadcn/UI apps, Theme Wizard provides a simple and intuitive interface to customize colors, fonts, and visual styles effortlessly.
Check the live site
- Choose and tweak colors with ease using various options, including a color picker, eyedropper, hex input, or suggested colors.
- Instantly generate fresh color palettes based on your preferences and experiment with new looks effortlessly.
- Toggle between light and dark modes seamlessly to find the perfect visual style for your app.
- Maintain complete control over your design by easily reverting to previous states or comparing changes.
- Fine-tune colors for specific elements by simply clicking on them, revealing their distinct color options.
- Lock colors you like and randomize the rest to maintain design consistency.
- Tailor your typography with Google Fonts and get inspired with a click of the Random button.
- Achieve the perfect element shape by adjusting the border radius to your liking.
- When your theme is ready, export the CSS with a single click and seamlessly integrate it into your project, making customization a breeze.
-
Clone the repository:
git clone https://github.com/fozuzip/theme-wizard.git -
Install dependencies:
npm install -
Create a
.env.localfile in the project's root directory. -
In the
.env.localfile, set theNEXT_PUBLIC_FONTS_API_KEYvariable with a valid Google Fonts API key. For example:NEXT_PUBLIC_FONTS_API_KEY=your-google-fonts-api-key. You can obtain a Google Fonts API key by following Google's API key creation instructions -
Run the development server:
npm run dev -
Open your browser and visit
http://localhost:3000to start using Theme Wizard.
Inspired by Realtime Colors.
This project is licensed under the MIT License.