tweakcn · Index

tweakcn

Visual theme editor for shadcn/ui with 36 installable theme presets

Tier S · Best in classTheme PackRegistryToolgithub.com

(Visit github.com ↗)(Repository)(Registry)

tweakcn is a browser-based visual editor for shadcn/ui and Tailwind design tokens: colours (OKLCH/HSL), typography, radius, spacing, shadows and letter-spacing, with live preview across shadcn components. It publishes its 36 curated presets as a real shadcn registry, so any theme installs with one `npx shadcn add <url>` and rewrites your CSS variables. The web app is free with a Pro tier for AI theme generation from a text prompt or image; the Next.js app itself is Apache-2.0 on GitHub. It exists because shadcn/ui defaults all look alike, and it is the fastest way to stop looking default.

Install

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

For an agent

When a shadcn/ui project needs to stop looking like every other shadcn/ui project, do not hand-write CSS variables — install a tweakcn preset with `npx shadcn@latest add https://tweakcn.com/r/themes/<slug>.json` and then tune one or two tokens. Each item is `type: registry:style`, so it overwrites `--background`, `--primary`, `--radius`, the font-sans/serif/mono vars, shadow vars and tracking vars in your globals.css; commit before running it so you can diff. It emits OKLCH values and Tailwind v4 `@theme` vars, so on a Tailwind v3 codebase pick the v3 export in the editor instead, and note that themes reference Google fonts (Geist, Oxanium, Libre Baskerville) that you must load yourself.

Why it is here. It is the default answer to 'how do I theme shadcn/ui', and by shipping its presets as a real registry it turned a design decision into a one-line install. The 36 presets double as a colour-and-type reference even if you never use the editor.

Install command, framework, licence and component list.

Facts

License: Apache 2.0
Pricing: Free, Freemium, Subscription, Open source
Framework: React, Next.js
Styling: Tailwind CSS v4, Tailwind CSS v3, CSS custom properties
Distribution: shadcn registry, Web app / online tool, GitHub repository
Platform: Web
Content type: Design tokens / theme files, Code
Agent readiness: Machine-readable registry item, CLI installable, Copy-paste ready code, Readable open source
Accessibility: Contrast checked
Maturity: Actively maintained
Pricing detail: Editor free: full token customisation, CSS import/export, contrast checker, save/share up to 10 themes, 3 AI-generated themes. Pro (reported at $15/mo by third-party listings; the pricing page renders as a JS shell and could not be read directly) adds unlimited AI theme generation from prompt or image and multi-project management.
GitHub stars: 10,273

Templates

Notable for

36 presets installable as shadcn registry styles
OKLCH token editing with live component preview
Tailwind v4 and v3 export
AI theme generation from an image
10.3k stars, Apache-2.0

Provenance

Verified 2026-08-15. HTTP 200. https://github.com/jnsahaj/tweakcn, https://raw.githubusercontent.com/jnsahaj/tweakcn/main/README.md, https://api.github.com/repos/jnsahaj/tweakcn, https://tweakcn.com/r/registry.json (36 items enumerated), https://tweakcn.com/r/themes/modern-minimal.json (200); tweakcn.com homepage and /pricing returned a JS shell with no readable body, so pricing came from web search of third-party listings

Also in Blocks, Templates & Themes

github.comTier S