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

Add your theme info to the themes file.
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 -).
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%;
}