shads.app Open builder

Theme builder, not theme picker

Documentation

Install shadcn/ui themes from shads.app with the CLI, MCP server, or shadcn registry. Includes export formats, starter themes, and agent setup.

Open theme builder → Browse starters

What shads.app is

shads.app is a visual theme builder for shadcn/ui. Design tokens in the browser, preview them on real components, then export CSS, theme.json, or a shadcn registry install command.

  • 11 starter templates covering SaaS, docs, analytics, ops, finance, AI apps, marketing, commerce, education, and editorial UI
  • Live preview on primitives, component collections, and full page templates
  • Export CSS, theme.json, shadcn registry items, and create/install CLI commands
  • MCP server so coding agents can discover and validate themes without scraping the SPA
  • The builder is free to use without an account. Signed-in free accounts get 5 cloud themes, 10 public shares per month, and 10 hosted AI generations per month.
  • Pro is $12/month and adds unlimited cloud saves and shares, up to 500 hosted AI generations per month, readonly share links, version history, W3C token export, CSS import, custom Google Fonts, and the Chrome extension beta.

Quick start

Pick a starter, install it with the official shadcn CLI, or scaffold a new app with the shads CLI.

npx shadcn@latest add https://shads.app/r/workspace-theme.json
npx @shadsapp/cli create my-app -t workspace
npx -y @shadsapp/mcp

Guides

GuideUse it when
CLIYou want to create an app or install a theme from a terminal
MCPCursor, Claude, or another agent should fetch themes for you
RegistryYou already use npx shadcn@latest add
ExportYou need CSS variables, theme.json, or a zip bundle
Starter themesYou want a named production-ready preset

FAQ

What is shads.app?

shads.app is a visual theme builder for shadcn/ui. Design tokens in the browser, preview them on real components, then export CSS, theme.json, or a shadcn registry install command.

How do I install a shads theme into an existing shadcn/ui project?

Run npx shadcn@latest add https://shads.app/r/workspace-theme.json or npx @shadsapp/cli install -t workspace. Custom themes from the builder export a share-backed registry URL.

How do ChatGPT, Claude, or Cursor use shads.app?

Install the MCP server with npx -y @shadsapp/mcp. Agents can then list public starter themes, fetch theme.json + theme.css, and validate theme documents. Cursor rules ship as npx shadcn@latest add https://shads.app/r/skill.json.

How much does shads.app cost?

The builder is free to use without an account. Signed-in free accounts get 5 cloud themes, 10 public shares per month, and 10 hosted AI generations per month. Pro is $12/month and adds unlimited cloud saves and shares, up to 500 hosted AI generations per month, readonly share links, version history, W3C token export, CSS import, custom Google Fonts, and the Chrome extension beta.