# 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.

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.

## Use

- [App](https://shads.app): visual shadcn/ui theme builder
- [Docs](https://shads.app/docs): CLI, MCP, registry, export
- [CLI](https://shads.app/docs/cli): npx @shadsapp/cli create my-app -t workspace
- [MCP](https://shads.app/docs/mcp): npx -y @shadsapp/mcp
- [Registry](https://shads.app/docs/registry): npx shadcn@latest add https://shads.app/r/workspace-theme.json
- [Starter themes](https://shads.app/themes)
- [Comparison](https://shads.app/compare/shadcn-theme-builders)
- [Help](https://shads.app/help)
- [Pricing](https://shads.app/pricing)
- [Community gallery](https://shads.app/gallery)

## Packages

- [@shadsapp/cli](https://www.npmjs.com/package/@shadsapp/cli)
- [@shadsapp/mcp](https://www.npmjs.com/package/@shadsapp/mcp)
- [@shadsapp/themes](https://www.npmjs.com/package/@shadsapp/themes)
- [@shadsapp/schema](https://www.npmjs.com/package/@shadsapp/schema)

## Starter themes

- [Workspace](https://shads.app/themes/workspace): SaaS teams and internal tools — balanced rhythm, soft cards, calm brand accent
- [Brief](https://shads.app/themes/brief): Docs and wikis — readable body type, bordered panels, warm gray canvas
- [Insights](https://shads.app/themes/insights): Analytics and BI — indigo accent, compact tables, chart-forward dashboards
- [Dispatch](https://shads.app/themes/dispatch): Ops and incident response — alert orange accent, bordered panels, alert-ready density
- [Ledger](https://shads.app/themes/ledger): Banking and fintech — cool ocean palette, compact KPI layouts, utility controls
- [Canvas](https://shads.app/themes/canvas): AI assistants and chat — minimal chrome, frameless content, ink neutrals
- [Terminal](https://shads.app/themes/terminal): Developer tools and consoles — compact mono-friendly type, flat panels, utility buttons
- [Launch](https://shads.app/themes/launch): Marketing and landing pages — display type, dramatic lift, hero-led growth
- [Commerce](https://shads.app/themes/commerce): E-commerce and retail — comfortable controls, lifted product cards, warm accent
- [Campus](https://shads.app/themes/campus): Education and healthcare — friendly rounded UI, calm greens, spacious controls
- [Editorial](https://shads.app/themes/editorial): Fashion and image-led retail — paper canvas, bordered cards, acid accent

## For agents

Install MCP:

```bash
npx -y @shadsapp/mcp
```

Install the Workspace theme:

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

Optional full text: https://shads.app/llms-full.txt