shadcn/ui Theme Explorer

Color the web with beautifully designed themes

Inspired by @peduarte's work on Raycast Theme Explorer, a collection of themes designed to complement shadcn/ui beautifully crafted components.

What’s In This Document

• Upload a theme
• License
• Thanks to Our Contributors

Contributing

This is a Next.js 13 app. If you're unfamiliar with it, check out the Next.js Documentation.

Download the repo and run the development server:

npm run dev

🎨 Upload a theme

1. Add your theme info to the themes file.
2. Create a file inside the folder styles/themes with the name of the theme you added in the previous step (if it contains spaces, replace them by -).
3. Same format as the following example:

.theme-{theme-name}.light {
  --background: 220, 16%, 96%;
  --foreground: 222, 20%, 16%;

  --muted: 215, 14%, 80%;
  --muted-foreground: 222, 20%, 16%;

  --popover: 220, 16%, 96%;
  --popover-foreground: 222, 20%, 16%;

  --border: 222, 20%, 70%;
  --input: 222, 20%, 70%;

  --card: 220, 16%, 96%;
  --card-foreground: 222, 20%, 16%;

  --primary: 222, 20%, 70%;
  --primary-foreground: 220, 16%, 96%;

  --secondary: 215, 14%, 80%;
  --secondary-foreground: 222, 20%, 16%;

  --accent: 215, 14%, 80%;
  --accent-foreground: 222, 20%, 16%;

  --destructive: 0, 80%, 50%;
  --destructive-foreground: 222, 20%, 16%;

  --ring: 222, 20%, 70%;
}

.theme-{theme-name}.dark {
  --background: 220, 16%, 16%;
  --foreground: 222, 20%, 96%;

  --muted: 215, 14%, 25%;
  --muted-foreground: 222, 20%, 96%;

  --popover: 220, 16%, 16%;
  --popover-foreground: 222, 20%, 96%;

  --border: 222, 20%, 40%;
  --input: 222, 20%, 40%;

  --card: 220, 16%, 16%;
  --card-foreground: 222, 20%, 96%;

  --primary: 222, 20%, 40%;
  --primary-foreground: 220, 16%, 16%;

  --secondary: 215, 14%, 25%;
  --secondary-foreground: 222, 20%, 96%;

  --accent: 215, 14%, 25%;
  --accent-foreground: 222, 20%, 96%;

  --destructive: 0, 80%, 50%;
  --destructive-foreground: 222, 20%, 96%;

  --ring: 222, 20%, 40%;
}

5. Import the file you just created in the global.css file.

❗ Code of Conduct

We expect everyone to abide by our Code of Conduct. Please read it. 🤝

📝 License

Licensed under the MIT License.

💜 Thanks

Thanks to everyone contributing in any manner to this repo and we extend this thanks to everyone working on Open Source.

Sharing is Caring

Contributors ✨

Thanks goes to these wonderful people (emoji key):

ThankGod Eboreime 💻 🚧

Daniel Sousa 💻 🎨

Luis Filipe 💻 📖 🎨 🤔 🚧 👀

Joana Santos 💻 📖 🎨 🤔 🚧 👀

This project follows the all-contributors specification. Contributions of any kind are welcome!