详细内容
✦ Visual Theme Editor
Design Your Perfect shadcn/ui Theme
Customize colors, typography, and layouts with a real-time preview. No signup required.
Start Customizing View Examples
Real-time Preview
Export to Tailwind
Beautiful Presets
Color Palette
Primary
Secondary
Accent
Muted
Background
Preview
Copy Codeoklch, hsl, rgb, hex
UI
✦ Theme Presets
Elevate Your Design Instantly
Apply theme presets with a single click. See how each option enhances the look.
modern minimal
amethyst haze
catppuccin
kodama grove
quantum rose
elegant luxury
neo brutalism
cyberpunk
caffeine
midnight bloom
vintage paper
claude
mono
modern minimal
amethyst haze
catppuccin
kodama grove
quantum rose
elegant luxury
neo brutalism
cyberpunk
caffeine
midnight bloom
vintage paper
claude
mono
modern minimal
amethyst haze
catppuccin
kodama grove
quantum rose
elegant luxury
neo brutalism
cyberpunk
caffeine
midnight bloom
vintage paper
claude
mono
modern minimal
amethyst haze
catppuccin
kodama grove
quantum rose
elegant luxury
neo brutalism
cyberpunk
caffeine
midnight bloom
vintage paper
claude
mono
violet bloom
mocha mousse
notebook
graphite
cosmic night
nature
amber minimal
solar dusk
pastel dreams
ocean breeze
candyland
sunset horizon
vercel
soft pop
violet bloom
mocha mousse
notebook
graphite
cosmic night
nature
amber minimal
solar dusk
pastel dreams
ocean breeze
candyland
sunset horizon
vercel
soft pop
violet bloom
mocha mousse
notebook
graphite
cosmic night
nature
amber minimal
solar dusk
pastel dreams
ocean breeze
candyland
sunset horizon
vercel
soft pop
violet bloom
mocha mousse
notebook
graphite
cosmic night
nature
amber minimal
solar dusk
pastel dreams
ocean breeze
candyland
sunset horizon
vercel
soft pop
t3 chat
bubblegum
doom 64
perpetuity
tangerine
bold tech
supabase
claymorphism
clean slate
retro arcade
northern lights
starry night
darkmatter
sage garden
t3 chat
bubblegum
doom 64
perpetuity
tangerine
bold tech
supabase
claymorphism
clean slate
retro arcade
northern lights
starry night
darkmatter
sage garden
t3 chat
bubblegum
doom 64
perpetuity
tangerine
bold tech
supabase
claymorphism
clean slate
retro arcade
northern lights
starry night
darkmatter
sage garden
t3 chat
bubblegum
doom 64
perpetuity
tangerine
bold tech
supabase
claymorphism
clean slate
retro arcade
northern lights
starry night
darkmatter
sage garden
GmailAlicia Koch
Inbox
All mailUnread
William Smith
about 2 years ago
Meeting Tomorrow
Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success.
Please come prepared with any questions or insights you may have. Looking forward to
meeting
work
important
Alice Smith
about 2 years ago
Re: Project Update
Thank you for the project update. It looks great! I've gone through the report, and the progress is impressive. The team has done a fantastic job, and I appreciate the hard work everyone has put in.
I have a few minor suggestions that I'll include in the attached document.
Let's discuss these duri
work
important
Bob Johnson
over 2 years ago
Weekend Plans
Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It's been a while since we had some outdoor fun.
If you're interested, let me know, and we can plan the details. It'll be a great way to unwind and enjoy nature.
Looking forward to your response!
Best, Bob
personal
Emily Davis
over 2 years ago
Re: Question about Budget
I have a question about the budget for the upcoming project. It seems like there's a discrepancy in the allocation of resources.
I've reviewed the budget report and identified a few areas where we might be able to optimize our spending without compromising the project's quality.
I've attached a de
work
budget
Michael Wilson
over 2 years ago
Important Announcement
I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We've received valuable feedback from our beta testers, and I believe it's time to make some adjustments to better meet our customers' needs.
This chang
meeting
work
important
Sarah Brown
almost 3 years ago
Re: Feedback on Proposal
Thank you for your feedback on the proposal. It looks great! I'm pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.
I've attached the revised proposal for your review.
Plea
work
David Lee
almost 3 years ago
New Project Idea
I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months.
I've prepared a detailed proposal outlining the potential benefits and the strategy for execution.
This project has the potentia
meeting
work
important
Olivia Wilson
almost 3 years ago
Vacation Plans
Let's plan our vacation for next month. What do you think? I've been thinking of visiting a tropical paradise, and I've put together some destination options.
I believe it's time for us to unwind and recharge. Please take a look at the options and let me know your preferences.
We can start making
personal
James Martin
almost 3 years ago
Re: Conference Registration
I've completed the registration for the conference next month. The event promises to be a great networking opportunity, and I'm looking forward to attending the various sessions and connecting with industry experts.
I've also attached the conference schedule for your reference.
If there are any sp
work
conference
Sophia White
about 3 years ago
Team Dinner
Let's have a team dinner next week to celebrate our success. We've achieved some significant milestones, and it's time to acknowledge our hard work and dedication.
I've made reservations at a lovely restaurant, and I'm sure it'll be an enjoyable evening.
Please confirm your availability and any di
meeting
work
Daniel Johnson
about 3 years ago
Feedback Request
I'd like your feedback on the latest project deliverables. We've made significant progress, and I value your input to ensure we're on the right track.
I've attached the deliverables for your review, and I'm particularly interested in any areas where you think we can further enhance the quality or e
work
Ava Taylor
about 3 years ago
Re: Meeting Agenda
Here's the agenda for our meeting next week. I've included all the topics we need to cover, as well as time allocations for each.
If you have any additional items to discuss or any specific points to address, please let me know, and we can integrate them into the agenda.
It's essential that our me
meeting
work
William Anderson
about 3 years ago
Product Launch Update
The product launch is on track. I'll provide an update during our call. We've made substantial progress in the development and marketing of our new product.
I'm excited to share the latest updates with you during our upcoming call. It's crucial that we coordinate our efforts to ensure a successful
meeting
work
important
Mia Harris
about 3 years ago
Re: Travel Itinerary
I've received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I've reviewed the schedule and the accommodations, and everything seems to be in order. I'm looking forward to the trip, and I'm confident it'll be a smooth and enjoyable experience.
I
personal
travel
Ethan Clark
over 3 years ago
Team Building Event
Let's plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I've done some research and have a few ideas for fun and engaging activities.
Please let me know your thoughts and
meeting
work
Chloe Hall
over 3 years ago
Re: Budget Approval
The budget has been approved. We can proceed with the project. I'm delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone, and it means we can move forward with the project as planned.
I've attached the finalized bu
work
budget
Samuel Turner
over 3 years ago
Weekend Hike
Who's up for a weekend hike in the mountains? I've been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you're up for the challenge, we can explore some scenic trails and enjoy the beauty of nature.
I've done some research and have a few routes in mind
personal
ArchiveMove to junkMove to trash
Snooze
ReplyReply allForward
More
WS
William Smith
Meeting Tomorrow
Reply-To: williamsmith@example.com
Oct 22, 2023, 9:00:00 AM
Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success.
Please come prepared with any questions or insights you may have. Looking forward to our meeting!
Best regards, William
Mute this threadSend
Total Revenue
$15,231.89
+20.1% from last month
Subscriptions
+2,350
+180.1% from last month
tweakcn
A visual editor for shadcn/ui components with beautiful themes. Accessible. Customizable. Open Source.
TypeScript
20k
Updated April 2023
✦ Testimonials
Loved by developers worldwide
See what the community is saying about tweakcn
\
\
\
\
shadcn\
\
@shadcn\
\
4/n - Finally, a custom theme from tweakcn by @iamsahaj_xyz
\
\
Kevin Kern\
\
@kregenrek\
\
Tweakcn is really cool. Custom shadcn themes on the fly.
\\
\
shadcn\
\
@shadcn\
\
4/n - Finally, a custom theme from tweakcn by @iamsahaj_xyz
\
\
Kevin Kern\
\
@kregenrek\
\
Tweakcn is really cool. Custom shadcn themes on the fly.
\
\
\
\
\✦ Features
Powerful Customization Tools
All the tools you need to customize your shadcn/ui components and make them unique.
Color Control
Customize background, text, and border colors with an intuitive color picker interface. We even integrate with the latest Tailwind v4 color palette.
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.
Contrast Checker
Ensure your designs meet accessibility standards with built-in contrast ratio checking between text and background colors.
AI Theme GenerationPro
Create stunning, ready-to-use themes in seconds. Just provide an image or a text prompt, and our AI does the rest.
✦ Pro Features
Generate Themes With AI in Seconds
Create stunning ready-to-use themes. Just provide an image or text prompt, and our AI does the rest.
Theme Preview
Checkpoint Restoration
Image Uploads
Generate a theme from this image.
Copy
I've generated a Midnight Bloom theme based on your image. It features deep purples and blues for a calming, modern look.
Copy
Can you generate a theme inspired by @Twitter?
Copy
Alright, I've whipped up a Twitter-inspired theme. Expect bright blues and clean contrasts for a social, energetic vibe.
Copy
How about a @Supabase theme?
Copy
I've generated a Supabase theme for you. It uses fresh greens and dark backgrounds for a modern, developer-friendly feel.
Copy
✦ How It Works
Simple Process, Beautiful Results
Customize your shadcn/ui components in just a few simple steps.
01
Select Theme Preset
Choose the theme you want to customize from our growing library.
02
Customize Visually
Use our intuitive interface to adjust colors, dimensions, typography, and other properties.
03
Copy Code
Copy the generated Tailwind CSS code directly into your project.
✦ Roadmap
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
Done
Create and manage complete themes with presets for your entire application.
Theme Import/Export
Done
Save and share your custom themes with others.
AI Theme Generation
In Progress
Generate and customize themes with AI assistance, making theme creation faster and more intuitive
Community Themes
Coming Soon
Allow users to submit themes, vote on the best designs
Multi-Project Management
Planned
Save and manage multiple theme projects, making it easy to switch between designs.
Smart Theme Generator
Planned
Generate beautiful themes from a single color, color pair, or even an image. Expand your customization options with AI-powered theme generation.
✦ FAQ
Frequently Asked Questions
Find answers to common questions about tweakcn.
What is tweakcn?
Is tweakcn free to use?
What is tweakcn Pro and what does it include?
How do I customize a shadcn/ui theme?
Does tweakcn support Tailwind CSS v4?
Do I need to know Tailwind CSS to use tweakcn?
Can I use tweakcn with my existing shadcn/ui project?
Is tweakcn open source?
Ready to Make Your Components Stand Out?
Start customizing your shadcn/ui components today and create a unique look for your application.
No login required. Free to use. Open source.