Level up your shadcn/ui components with tweakcn

shadcn is a popular open-source UI component library for React, built on radix ui primitives and Tailwind CSS. It provides accessible, unstyled, and highly customizable components you can copy into your project and style as you like.

However, using only the default shadcn themes (neutral, zinc, gray) can make many sites look similar. That’s where tweakcn comes in.

What is tweakcn?

tweakcn is a visual theme editor created by @iamsahaj_xyz that lets you create and apply beautiful, themes to your shadcn/ui components—for both light and dark modes.

Key features:

• Visual, no-code theme editing
• Real-time preview of changes
• Presets inspired by popular sites (T3 Chat, Supabase, Twitter, Vercel, Claude, and more)
• AI-powered theme generation from images or text
• Easy copy-paste integration with your project

Modern Minimal Theme

T3 Chat Theme

Why use tweakcn?

• Stand out: Move beyond the default look and make your UI unique.
• Save time: No need to hand-tune Tailwind configs.
• Accessibility: Built-in contrast checker ensures your themes are readable.

How to use tweakcn

1. Go to tweakcn.com/editor/theme.
2. Pick a theme or start from scratch.
3. Customize colors, typography, and more in the visual editor.
4. Copy the generated theme code.
5. Paste it into your project’s Tailwind config or CSS.

Adding theme to your project

You can also use AI features to generate and save custom themes.

Thanks for reading