Modify design properties and see changes instantly
The editor enables live preview of theme modifications, allowing developers to adjust properties and immediately visualize how changes affect shadcn/ui components
tweakcn
tweakcn
Design your perfect shadcn/ui theme with real-time preview
Overview
What it is
Customize theme for shadcn/ui with an interactive editor. Supports Tailwind CSS v4, shadcn/ui, and custom styles. Modify properties, preview changes, and get the code in real time.
Intent
I need it when
Maintain design consistency across Tailwind CSS and shadcn/ui implementations
The tool ensures themes work seamlessly with both Tailwind CSS v4 and shadcn/ui, helping developers maintain consistent styling across their component library
Generate and export theme code for project integration
tweakcn generates ready-to-use theme code that developers can copy and integrate directly into their shadcn/ui projects without manual configuration
Create and customize visual themes for shadcn/ui components
tweakcn provides an interactive theme editor that allows users to customize shadcn/ui themes with real-time preview, supporting Tailwind CSS v4 and custom styles while generating exportable code
Drop
Not a fit when
- User needs to design themes for non-shadcn/ui component libraries or frameworks
- User requires offline theme editing without internet access
- User needs to generate themes for CSS-in-JS solutions that don't support Tailwind CSS
- User wants to customize themes without code generation or export capabilities
- User needs real-time collaboration features for team-based design work
Commercials
Pricing
Pricing not specified View pricing