shads.app
Open builder →

Theme builder, not theme picker

Help center

Preview on real components, tune every token, export production CSS — the full playbook for shipping shadcn/ui themes.

Also see docs, starter themes, and builder comparisons.
Open theme builder → Browse starters

Getting started

Design a shadcn/ui theme visually, preview it on real components, then export CSS or JSON for your project.

  • Pick a starter template from the Theme tab to set typography, spacing, corners, and surfaces.
  • Switch preview tabs (Primitives, Components, Template) to stress-test your theme.
  • Use Get theme to copy an agent install prompt, shadcn CLI commands, or download files.

Three preview tabs let you stress-test the same theme across different UI surfaces.

  • Primitives — base controls like buttons, inputs, and badges.
  • Components — curated collections of composed UI patterns.
  • Templates — full page layouts such as dashboards, docs, and landing pages.

Theme controls

Theme, Colors, Layout, Type, and Icons tabs adjust tokens independently from the active starter.

TabWhat it controls
ThemeSwitch starters, save user presets, and import themes.
ColorsPick a brand palette, canvas and accent shade; tweak individual colors for light and dark.
LayoutTune corners, spacing, density, surfaces, personality, backdrop, menus, focus and motion.
TypeChoose the type scale and the body, display and mono fonts.
IconsPreview Lucide, Tabler, Hugeicons, Phosphor, Remix Icon, and Pro packs (Heroicons, Iconoir).

Get theme and import

Get theme defaults to a copyable agent prompt. The shadcn tab has CLI commands; Download has CSS, npm, zip, and tokens.

  • Agent — paste a prompt into Cursor or Claude; it uses the official shadcn CLI, not raw CSS.
  • shadcn — copy create (new project) or add (existing project) commands directly.
  • Download — CSS files, npm CLI, zip bundle (theme.css, index.css, theme.json), and Figma tokens.
  • Starter themes use a stable catalog URL; custom themes create a share-backed install URL automatically.
  • Use Publish in the header to share with others (sign-in required).
  • Import theme from the menu to restore theme.json or paste CSS from an existing project.

Install a starter theme into an existing project:

npx shadcn@latest add https://shads.app/r/workspace-theme.json

Save, publish, and Community

Save keeps a theme for you. Publish sends it to others. Community is where published themes from other builders appear.

  • Draft state persists in localStorage so refresh keeps your current tab and theme.
  • Save — guests store presets on this device only. Sign in to save themes to your cloud account.
  • Publish — sign in, then copy a link others can open. Also listed in Community for 90 days.
  • Community (gallery) — browse themes shared by other builders, not your saved presets.
  • My themes — manage saved themes and links you published while signed in.

AI theme generation

Generate theme variations from a short brief. Sign in required — the theme engine stays on the server.

  • Click the sparkles icon in the header to generate a theme from a brief.
  • Free accounts get 10 hosted generations per month. Pro gets 500.
  • Preview three variations, apply one, then refine colors and typography manually.
  • Free hosted AI uses the standard font and icon catalog only. Pro unlocks the full builder library in generation.

Live preview bookmarklet Beta

Try a theme on any shadcn site without merging CSS into a repo first.

  1. Open the ⋯ menu → Live preview bookmarklet to install the bookmark.
  2. Copy all snippets from Export, then run the bookmarklet on ui.shadcn.com/create or your own shadcn app.
  3. After refresh, use Re-apply saved in the bookmarklet to restore your last paste.

Chrome extension preview Preview

Pro users can sync a theme from the builder and preview it on compatible shadcn apps with one click.

  1. Open the ⋯ menu → Chrome extension → Install from Chrome Web Store.
  2. Customize your theme, then click Sync current theme in the dialog.
  3. Open your shadcn app tab and click the extension icon → Apply to this tab.

Accounts, Pro, and billing

Sign in for cloud saves and hosted AI. Upgrade to Pro for unlimited themes, permanent shares, and advanced export.

  • Free signed in: 5 cloud themes, 10 public shares/month, 10 hosted AI generations/month.
  • Pro ($8/month): unlimited saves and shares, readonly links, version history, token export, CSS import, Pro font library, custom Google Fonts, and the Chrome extension preview.
  • Upgrade from the account menu → Upgrade to Pro. Manage billing and cancellation from Manage billing.
  • After checkout, Pro unlocks when Dodo confirms your subscription — usually within seconds.

Billing questions: [email protected] — see pricing, refunds, and contact for plan details.

Settings and advanced

Fine-tune the builder shell and the guidance that travels with your exported theme.

  • Settings — choose sidebar vs dock controls, dock position, and gallery preview options.
  • Advanced — agent guidance (intent, density, accent, corners) stored with your theme skill.
  • Undo/redo in the header tracks theme edits during your session.