tweakcn

tweakcn is a visual theme editor and generator for shadcn/ui that lets developers customize themes, preview changes in real time, and export to a project. Supports Tailwind CSS v4 and v3.

AI Design Generator AI Design Assistant AI Developer Tools

Visit Website

Overview

tweakcn is a visual theme editor and generator for shadcn/ui. It helps developers build and refine custom themes by changing colors, typography, and other theme properties in a live preview instead of editing styles blindly.

The product supports Tailwind CSS v4 and v3, works with shadcn/ui and custom styles, and offers export paths for copying CSS variables or a Shadcn Registry command into a project. The home page also positions it as a no-signup starting point with community themes and AI-assisted theme creation.

Powerful tools for shadcn/ui theming

Color controls

Adjust background, text, border, accent, chart, and sidebar colors through a visual interface instead of editing theme tokens by hand.

Typography settings

Tune font size, weight, and text transform so the theme matches the tone and hierarchy of the interface.

Tailwind version support

Switch between Tailwind v4 and v3 while working with supported color formats such as OKLCH and HSL.

Detailed property editing

Edit radius, spacing, shadows, and other theme properties for broader control over component appearance.

Contrast checker

Check contrast ratios while editing to catch accessibility issues before export.

AI theme generation

Create a theme from an image or prompt in the AI flow, then refine it in the editor.

Common ways teams use tweakcn

Create a custom app theme
Start from a preset or community theme, then adjust colors, radius, and typography until the design fits a specific product brand.
Generate a theme from an idea
Use the AI theme flow to generate a starting point from an image or prompt, then refine the result in the editor.
Export a usable theme for implementation
Move theme settings into a project by exporting CSS variables or a Shadcn Registry command after previewing the result.
Explore and reuse community designs
Browse public community themes for inspiration, then compare styles by tags such as minimal, professional, dashboard, or cyberpunk.
Validate contrast during design
Check contrast ratios while iterating on colors to keep the theme closer to accessible UI choices.

Pros and Cons

Pros

Real-time preview makes theme changes easier to evaluate before exporting.
Supports both manual customization and AI-assisted theme generation.
Free plan includes full theme customization and export options.
Community themes provide examples and a place to browse existing designs.
Pricing is simple and publicly listed, with a free tier and a monthly Pro option.

Cons

The public source does not spell out every editor capability or integration in detail.
Some Pro features are described only at a high level, so exact limits beyond the listed plan items are not shown in the source.

FAQ

What is tweakcn?

tweakcn is a visual theme editor and generator for shadcn/ui. It lets you customize colors, typography, layout-related properties, preview changes in real time, and export the result as code or CSS variables.

Is tweakcn free?

Yes. The pricing page includes a Free plan and a Pro plan. The Free plan includes full theme customization, 5 AI-generated themes, saving and sharing up to 10 themes, importing and exporting via CSS variables, exporting via a Shadcn Registry command, and a contrast checker.

What's included in Pro?

Pro adds unlimited saved and shared themes, unlimited AI-generated themes, image-based theme generation, priority support, and the ability to save your own fonts and colors.

Does tweakcn support Tailwind v4?

The source explicitly says tweakcn supports Tailwind CSS v4, and the editor page also references Tailwind v3. The pricing and home copy also mention shadcn/ui and custom styles.

Can I use tweakcn with existing projects?

Yes. The home page says you can start customizing without signup, and the pricing page includes a Free plan that supports full theme customization. The editor is positioned for shadcn/ui projects, including importing and exporting themes through CSS variables or a Shadcn Registry command.

Quick Facts

Category: Design Tool / Developer Tool
Primary use: Theming shadcn/ui components
Platforms / stack: Web app; Tailwind CSS v4 and v3; shadcn/ui
Entry point: Free plan available; Pro is $8/month billed monthly
Notable workflows: Visual editing, AI theme generation, community browsing, CSS variable export, Shadcn Registry export
Website: tweakcn.com