https://github.com/subhadeeproy3902/shadcnthemes

A unique and intuitive theme generator for ShadCN UI, offering perfectly harmonized color palettes with real-time previews.
https://github.com/subhadeeproy3902/shadcnthemes

harmonic nextjs shadcn-ui themes typescript

Last synced: 6 months ago
JSON representation

A unique and intuitive theme generator for ShadCN UI, offering perfectly harmonized color palettes with real-time previews.

• Host: GitHub
• URL: https://github.com/subhadeeproy3902/shadcnthemes
• Owner: subhadeeproy3902
• Created: 2025-01-30T20:43:09.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-10T17:42:28.000Z (about 1 year ago)
• Last Synced: 2025-05-10T18:25:38.770Z (about 1 year ago)
• Topics: harmonic, nextjs, shadcn-ui, themes, typescript
• Language: TypeScript
• Homepage: https://shadcnthemes.vercel.app
• Size: 1.44 MB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# ShadCN Theme Generator 🎨

A unique and intuitive theme generator for ShadCN UI, offering perfectly harmonized color palettes with real-time previews.

## 🚀 Features

- 🎨 **Randomized Harmonized Themes** - Generates themes where all primary, accent, secondary, muted, and foreground colors are in harmony.

- 🟥 **Structured Destructive Colors** - Ensures all destructive colors belong to the red spectrum.

- 🎛 **Smart Manual Selection** - Provides the best possible harmonized colors based on the chosen primary color.

- ⚡ **Real-time Preview** - Instantly see how the theme looks in both light and dark modes.

- 🌗 **Light & Dark Modes** - Toggle between modes effortlessly.

- 📋 **Copy CSS Variables** - Get the generated CSS variables instantly for easy integration.

## 🎯 Why is it Unique?

Unlike traditional theme generators, this tool ensures:

- Every color in the palette complements the others.

- Destructive colors always remain within the red spectrum for consistency.

- Even in manual selection, the chosen primary color intelligently dictates the best harmonized shades.

## 📸 Preview

![Theme Generator Preview](./src//app/opengraph-image.png)

![alt text](image.png)

## 🔥 Usage

Simply tweak the settings, generate your theme, and copy the CSS variables to use them in your project!

---

🚀 **Start designing beautiful themes effortlessly!**

## Author

- Subhadeep Roy ([Twitter](https://x.com/mvp_subha))