Preview and Select a Theme
Click on a theme below to preview how it transforms the page.
Powerful Customization Tools
tweakcn provides all the tools you need to customize your shadcn/ui components and make them unique.
Visual Theme Customizer
Customize your shadcn/ui components with a real-time preview to see changes instantly.
Color Control
Customize background, text, and border colors with an intuitive color picker interface.
Typography Settings
Fine-tune font size, weight, and text transform to create the perfect look.
Tailwind v4 & v3 Support
Seamlessly switch between Tailwind v4 and v3, with support for multiple color formats including OKLCH & HSL.
Tailwind properties
Fine-tune every aspect of your components with precise control over radius, spacing, shadows, and other Tailwind properties.
Beautiful Theme Presets
Choose from stunning pre-designed themes and customize both light and dark mode colors effortlessly.
Simple Process, Beautiful Results
Customize your shadcn/ui components in just a few simple steps.
Select Theme Preset
Choose the theme you want to customize from our growing library.
Customize Visually
Use our intuitive interface to adjust colors, dimensions, typography, and other properties.
Copy Code
Copy the generated Tailwind CSS code directly into your project.
What's Coming Next
We're constantly working to improve tweakcn and add new features. Here's what's on our roadmap.
Global Theme Editor
Create and manage complete themes with presets for your entire application.
Theme Import/Export
Save and share your custom themes with others.
More Controls
Support for more controls, including Spacing, Shadows, Tracking and more
Community Themes
Allow users to submit themes, vote on the best designs
Multi-Project Management
Save and manage multiple theme projects, making it easy to switch between designs.
More Presets
Expand the preset library with a wider variety of stunning themes for quick customization.
Frequently Asked Questions
Find answers to common questions about tweakcn.