Tailwind Resources Logo Tailwind Resources
Theme Wizard screenshot

Theme Wizard

Author Avatar Theme by Fozuzip
Updated: 2 Nov 2023
31 Stars

Create a theme for your tailwind and shadcn-ui apps with real time examples

Github Live Preview

Categories

Nextjs React Tanstack Cmdk Shadcn ui

Overview

Theme Wizard is an interactive design tool built with Next.js 13 that allows designers and developers to easily discover and fine-tune themes for their projects. It offers a simple and intuitive interface for customizing colors, fonts, and visual styles, catering to users working with Tailwind CSS or Shadcn/UI apps.

Features

  • Effortless Color Customization: Choose and tweak colors easily with options like color picker, eyedropper, hex input, or suggested colors.
  • Color Scheme Randomization: Instantly generate fresh color palettes based on preferences for easy experimentation.
  • Intuitive Mode Switching: Seamless toggling between light and dark modes to find the perfect visual style.
  • Undo and Redo: Maintain control over design by reverting to previous states or comparing changes.
  • Element-Specific Color Adjustment: Fine-tune specific element colors by clicking on them for distinct color options.
  • Color Locking: Lock preferred colors and randomize the rest for consistent design.
  • Advanced Font Selection: Customize typography using Google Fonts and get inspiration with a Random button.
  • Border Radius Customization: Adjust border radius for achieving perfect element shapes.
  • Effortless Export: Export CSS with a single click for easy integration into projects.

Installation

  1. Clone the repository: git clone https://github.com/fozuzip/theme-wizard.git
  2. Install dependencies: npm install
  3. Create a .env.local file in the project’s root directory.
  4. In the .env.local file, set the NEXT_PUBLIC_FONTS_API_KEY variable with a valid Google Fonts API key. Example: NEXT_PUBLIC_FONTS_API_KEY=your-google-fonts-api-key.
    • Obtain a Google Fonts API key by following Google’s API key creation instructions.
  5. Run the development server: npm run dev
  6. Open your browser and visit http://localhost:3000 to start using Theme Wizard.

Summary

Theme Wizard is a comprehensive design tool that simplifies the process of theme customization for designers and developers. With features like color customization, mode switching, font selection, and easy export functionality, it offers a user-friendly experience for creating visually appealing themes for projects. The tool’s integration with Next.js 13 provides a modern development environment, making it a valuable resource for those working on Tailwind CSS or Shadcn/UI apps.