Skip to content
Index730 resources
tweakcn

tweakcn

Visual shadcn/ui theme editor that exports 42 presets as a shadcn registry

Tier S · Best in classTheme PackToolAI Tooltweakcn.com

(Visit tweakcn.com ↗)(Docs)(Repository)(Registry)
Preview image from tweakcn.com

tweakcn is a no-code visual editor for shadcn/ui and Tailwind themes: you edit colors, typography, radius and shadows against a live component preview and it emits the CSS variables shadcn expects. It ships 42 named presets - including Claude, Vercel, Supabase, Catppuccin, T3 Chat and Twitter lookalikes - served as a real shadcn registry at /r/themes/registry.json, so any theme installs with one shadcn add command or through the shadcn registry MCP server. A contrast checker is built in, and it supports Tailwind v3 and v4 with OKLCH and HSL. The app itself is Apache-2.0 and self-hostable; AI theme generation is metered.

Install
npx shadcn@latest add https://tweakcn.com/r/themes/modern-minimal.json

For an agent

This is the fastest way to stop a shadcn/ui app looking stock: skip the web editor entirely and install a preset directly with npx shadcn@latest add https://tweakcn.com/r/themes/<name>.json - 42 names are listed in /r/themes/registry.json, so you can pick one from a text prompt like 'make it look like Claude' without opening a browser. Wire the whole registry into an agent with the shadcn MCP server, setting REGISTRY_URL to that registry.json. Two things to watch: a preset is registry:style, so it overwrites your base CSS variables and any hand-tuned tokens go with it - diff before applying - and saving your own themes or using AI generation needs an account, with the free tier capped at 10 saved themes and 5 AI generations.

Why it is here. It turned shadcn theming from a hand-edited CSS-variable chore into a one-command, machine-readable install, and at 10k stars it is the de facto standard theme source in the shadcn ecosystem.

Install command, framework, licence and component list.

Facts

License
Apache 2.0
Pricing
Freemium, Free, Subscription, Free but account required
Framework
React, Next.js
Styling
Tailwind CSS v4, Tailwind CSS v3, CSS custom properties
Distribution
Web app / online tool, shadcn registry, Hosted SaaS product, GitHub repository, MCP server
Platform
Web
Content type
Code, Design tokens / theme files
Agent readiness
Machine-readable registry item, MCP server, CLI installable, Copy-paste ready code, Readable open source, Login required
Accessibility
Contrast checked
Maturity
Actively maintained
Pricing detail
Free $0/month: full theme customization, 5 AI-generated themes, save and share up to 10 themes, CSS-variable import/export, shadcn registry command export, contrast checker. Pro $8/month billed monthly: unlimited saved and shared themes, unlimited AI generation, generate a theme from an image, save your own fonts and colors, priority support.
GitHub stars
10,273

Components it ships

2
Theme ProviderColor Picker

Helps you build

1
Settings Web App

Templates

42

Notable for

  • 42 presets as an installable shadcn registry
  • one-command theme install, no browser needed
  • works with the shadcn registry MCP server
  • Tailwind v3 and v4, OKLCH and HSL
  • built-in contrast checker
  • Apache-2.0 and self-hostable

Provenance

Verified 2026-08-15. HTTP 200. https://tweakcn.com (JS shell via WebFetch), https://tweakcn.com/pricing (raw HTML parsed for tiers), https://tweakcn.com/r/themes/registry.json (42 items), https://tweakcn.com/r/themes/claude.json, https://github.com/jnsahaj/tweakcn, GitHub API repos/jnsahaj/tweakcn, repo file components/editor/action-bar/components/mcp-dialog.tsx

Also in Blocks, Templates & Themes

6
tweakcn.comTier S