ShadCN Themer

About

Shadcn Themer is a web application that allows you to create, customize, and share themes for shadcn/ui. Build beautiful color schemes with real-time previews, export them for use in your projects, and discover themes created by the community.

Visit shadcnthemer.com to try it out!

Features

• 🎨 Visual Theme Editor - Intuitive color picker with OKLCH color space support
• 👁️ Live Previews - See your changes instantly across multiple UI components
• 🌓 Light/Dark Mode - Design and preview themes in both modes simultaneously
• 📦 Export Options - Export as CSS or via shadcn CLI registry format
• 📥 Import Themes - Import existing themes from CSS
• 🔀 Fork Themes - Build upon themes created by the community
• ⭐ Star System - Save and favorite your preferred themes
• 🔤 Font Customization - Choose from Google Fonts with live preview
• 📐 Border Radius Control - Customize component roundness
• 👤 User Profiles - Showcase your theme collection
• 🎯 Color Filtering - Browse themes by primary color

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui
• Database: PostgreSQL with Drizzle ORM
• Authentication: Supabase Auth (self-hosted GoTrue)
• Storage: S3-compatible bucket
• API: Hono with RPC pattern
• State Management: TanStack Query
• Color Handling: Color.js
• Icons: Lucide React
• Package Manager: pnpm

Support

• 🐛 Found a bug? Open an issue
• 💡 Have a feature request? Start a discussion

---

Built by Mike Tromba