Shadcn Theme Generator Documentation
Complete guide to customizing shadcn/ui themes with advanced Pro features and AI-powered generation.
Overview
The Theme Generator Pro allows you to customize shadcn/ui component themes with precision controls and AI assistance. Create beautiful, accessible themes that work perfectly with your projects.
Getting Started
To access Theme Generator Pro features:
- Sign up to unlock Pro features
- Navigate to the Theme Generator from the main menu
- Use the manual controls or AI generation to create your theme
- Export your theme CSS or save it to your account
Free vs Pro Features
| Features | Free | Pro |
|---|---|---|
| Hold to save theme in | localStorage | Database |
| Registry for custom theme | ||
| undo/redo | ||
| Contrast Checker | ||
| AI theme generator | ||
| Theme Sharing |
Keep track of your customizations with our powerful undo/redo system that remembers your last 30 changes. Never lose your progress and experiment freely.
Automatically check your theme for WCAG compliance. Get real-time feedback on contrast ratios and accessibility standards to ensure your themes work for everyone.
Save your custom themes to your personal account. Access your themes from anywhere and keep them synchronized across all your devices.
Share your themes with colleagues or the community. Collaborate on theme designs and exchange creative ideas with other developers.
Access your personal registry of custom themes generated with the Theme Generator, alongside the built-in theme registry. Browse, preview, and install any of your saved or built-in themes with a single click.
AI Theme Generation
Supported AI Models and Setup
Powerful and versatile theme generation with excellent understanding of design principles.
Our top recommendation for generating beautiful, well-balanced themes with excellent color harmony.
Completely free to use. Great for experimenting and learning without any API costs.
API Key Setup Instructions
OpenAI (GPT-4o)
- Visit OpenAI API Keys
- Sign in to your OpenAI account or create one
- Click "Create new secret key"
- Copy the key and paste it in the Theme Generator AI settings
Anthropic (Claude 3.7)
- Visit Anthropic Console
- Sign in or create an Anthropic account
- Generate a new API key
- Copy and add it to your AI settings
Groq (Llama 3.3 70B) - Free
- Visit Groq Console
- Create a free Groq account
- Generate an API key (completely free)
- Add it to start using Llama 3.3 70B for free
AI Features
Type @ in the prompt textarea to reference existing themes:
- Built-in themes: Choose from our curated theme collection
- Your saved themes: Reference your previously created themes
- Current theme: Modify your currently active theme
Navigate through your theme generation history with checkpoints. Go back to previous versions, apply themes directly, or save generated themes to your database.
Best Practices
Writing Effective AI Prompts
- Be specific: Include details about colors, mood, and style
- Mention use case: Specify if it's for a dashboard, website, app, etc.
- Reference styles: Mention design aesthetics like minimalist, modern, corporate
- Include accessibility needs: Mention if high contrast is required
Theme Development Tips
- Test your theme with different components before finalizing
- Use the accessibility checker to ensure WCAG compliance
- Save intermediate versions using the checkpoint system
- Share themes with team members for feedback