Generate and Preview shadcn/ui Themes in Real-time

themecn is a real-time shadcn/ui theme generator that enables you to create, preview, and export themes instantly.

This open-source tool provides a clean UI for customizing colors, typography, and layout settings. You can export themes directly for use with shadcn/ui CLI or download them as Tailwind CSS files.

GitHub Repo

Launch the Generator

Features

🎨 Visual Theme Creation: Build themes using a straightforward, visual editor.

🔄 Harmony Colors: Generate coordinated color palettes automatically.

🔗 Shareable URLs: Distribute your custom themes easily using unique links.

⬆️ Import Themes: Load existing Tailwind CSS globals.css files (v3/v4, HSL/OKLCH supported) to visualize and modify themes.

🎯 Real-time Preview: Instantly view modifications to colors and typography.

📱 Responsive Preview: Check how your theme looks on various screen sizes.

🎭 Dark Mode Support: Switch between light and dark theme previews.

🚀 shadcn/ui CLI Integration: Add themes to your shadcn/ui project via the CLI (requires Tailwind v4).

Use Cases

Rapid Prototyping: Quickly generate and test different visual styles for a new shadcn/ui project without writing CSS manually.
Brand Alignment: Create themes that perfectly match your company’s branding guidelines by importing existing color variables or using the visual editor.
Team Collaboration: Share theme concepts and variations with designers or other developers using shareable URLs for feedback and iteration.
Theme Exploration: Experiment with various color combinations and typography settings using the harmony color generator and real-time preview.
Updating Existing Projects: Import the globals.css from an existing shadcn/ui project to visualize the current theme and make modifications efficiently.

Usage

1. Access the themecn web application.

2. Click ‘Create Your Theme’ for an initial random theme setup.

3. Alternatively, use the controls (typically at the bottom) to adjust background, foreground, primary, secondary, and accent colors. You can also modify border-radius and typography settings.

4. To modify an existing theme, use the ‘Import’ feature. You can upload or paste the content of your globals.css file. Both HSL and OKLCH color formats are compatible.

5. Preview your changes in real-time across different components and responsive sizes.

6. Once satisfied, export the theme. Choose between:

shadcn/ui CLI: Get the registry endpoint URL for direct import (Tailwind v4 only).
Download globals.css: Select your Tailwind CSS version (v3 or v4) and download the generated CSS file to manually add it to your project.

Related Resources

shadcn/ui: The component library that themecn is built for. It provides a collection of reusable UI components for building modern applications. https://ui.shadcn.com/
Tailwind CSS: The CSS framework that powers shadcn/ui styling. Understanding Tailwind helps in customizing themecn outputs. https://tailwindcss.com/