Design Your Perfect shadcn/ui Theme

Customize colors, typography, and layouts with a real-time preview. No signup required.

Real-time Preview

Export to Tailwind

Beautiful Presets

Loved by developers

Join thousands of developers building beautiful interfaces.

YiMing

@yimingdothan

v0 + tweakcn + chatgpt for graphics generated a landing page in about 2~ hours crazy how easy this shit is now

Guillermo Rauch

@rauchg

If you're looking to learn: ▪️ full stack Next.js ▪️ how to build a focused product people love … look no further than tweakcn[0] by @iamsahaj_xyz. It's an open-source @shadcn theme builder.

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.

OrcDev

@theorcdev

Transform your Shadcn app with one click! @iamsahaj_xyz created a great concept with Tweakcn ⚔️

YiMing

@yimingdothan

v0 + tweakcn + chatgpt for graphics generated a landing page in about 2~ hours crazy how easy this shit is now

Guillermo Rauch

@rauchg

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.

OrcDev

@theorcdev

Transform your Shadcn app with one click! @iamsahaj_xyz created a great concept with Tweakcn ⚔️

Ciara Wearen

@nocheerleader

Create a Custom Theme: Your app instantly looks more intentional. Build a color palette, typography and layout preview with tweakcn dot com Grab the CSS → drop into Bolt = cohesive design

Tanpreet Jolly 🌂

@JollyTanpreet

I just tried tweakcn and seems like you nailed it. This is what I have been looking for, awesome job!

Code With Antonio

@YTCodeAntonio

there is an entire chapter dedicated to tweakcn!! such a cool project

Emir

@emirthedev

Started using tweakcn for client projects too. This is a real game changer

Matt Silverlock 🐀

@elithrar

used this shadcn theme editor to make it a little less plain: tweakcn.com

Ciara Wearen

@nocheerleader

Create a Custom Theme: Your app instantly looks more intentional. Build a color palette, typography and layout preview with tweakcn dot com Grab the CSS → drop into Bolt = cohesive design

Tanpreet Jolly 🌂

@JollyTanpreet

I just tried tweakcn and seems like you nailed it. This is what I have been looking for, awesome job!

Code With Antonio

@YTCodeAntonio

there is an entire chapter dedicated to tweakcn!! such a cool project

Emir

@emirthedev

Started using tweakcn for client projects too. This is a real game changer

Matt Silverlock 🐀

@elithrar

used this shadcn theme editor to make it a little less plain: tweakcn.com

Powerful Tools
For Total Control

Everything 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.

Typography Settings

Fine-tune font size, weight, and text transform to create the perfect look.

Tailwind v4 & v3

Seamlessly switch between Tailwind versions with support for OKLCH & HSL formats.

Detailed Properties

Fine-tune every aspect including radius, spacing, shadows, and other properties.

Contrast Checker

Ensure designs meet accessibility standards with built-in contrast ratio checking.

AI Theme GenerationPro

Create stunning, ready-to-use themes in seconds. Just provide an image or prompt.

Generate Themes in
Seconds

Just provide an image or text prompt, and our AI will create a stunning, production-ready theme for you.

Theme Preview

Checkpoint Restoration

Image Extraction

Text-to-Theme

Generate a theme from this image.

I've generated a Midnight Bloom theme based on your image. It features deep purples and blues for a calming, modern look.

Can you generate a theme inspired by @Twitter?

Alright, I've whipped up a Twitter-inspired theme. Expect bright blues and clean contrasts for a social, energetic vibe.

How about a @Supabase theme?

I've generated a Supabase theme for you. It uses fresh greens and dark backgrounds for a modern, developer-friendly feel.

Three Steps to
Perfection

We've simplified the theming process so you can focus on building your app.

Select Preset

Start with a pre-made theme from our library.

Customize

Adjust colors, radius, and typography visually.

Export Code

Copy the Tailwind CSS config to your project.

FAQ

Got questions? We've got answers. If you can't find what you're looking for, feel free to reach out.

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.

Design Your Perfect shadcn/ui Theme

Loved by developers

YiMing

Guillermo Rauch

shadcn

Kevin Kern

OrcDev

YiMing

Guillermo Rauch

shadcn

Kevin Kern

OrcDev

Ciara Wearen

Tanpreet Jolly 🌂

Code With Antonio

Emir

Matt Silverlock 🐀

Ciara Wearen

Tanpreet Jolly 🌂

Code With Antonio

Emir

Matt Silverlock 🐀

Powerful Tools For Total Control

Color Control

Typography Settings

Tailwind v4 & v3

Detailed Properties

Contrast Checker

AI Theme GenerationPro

Generate Themes in Seconds

Three Steps to Perfection

Select Preset

Customize

Export Code

FAQ

What is tweakcn?

Is it free?

What's included in Pro?

Supports Tailwind v4?

Can I use with existing projects?

Ready to Make Your Components Stand Out?

Design Your Perfect shadcn/ui Theme

Loved by developers

YiMing

Guillermo Rauch

shadcn

Kevin Kern

OrcDev

YiMing

Guillermo Rauch

shadcn

Kevin Kern

OrcDev

Ciara Wearen

Tanpreet Jolly 🌂

Code With Antonio

Emir

Matt Silverlock 🐀

Ciara Wearen

Tanpreet Jolly 🌂

Code With Antonio

Emir

Matt Silverlock 🐀

Powerful Tools For Total Control

Color Control

Typography Settings

Tailwind v4 & v3

Detailed Properties

Contrast Checker

AI Theme GenerationPro

Generate Themes in Seconds

Three Steps to Perfection

Select Preset

Customize

Export Code

FAQ

What is tweakcn?

Is it free?

What's included in Pro?

Supports Tailwind v4?

Powerful Tools
For Total Control

Generate Themes in
Seconds

Three Steps to
Perfection

Powerful Tools
For Total Control

Generate Themes in
Seconds

Three Steps to
Perfection