copypasteui

For developers

Ask your editor for a section. Get a file.

Every template, section and theme is a file you can install: through the local copypasteui MCP server in Claude Code, VS Code, Codex or Cursor, the shadcn CLI, our CLI, or the static JSON the site is built from.

$ npx copypasteui.dev setup

Detects your editors and shows what it will change before it does.

  • Runs on your machine
  • No account or API key
  • No quota
  • Works offline

cursor — ~/clients/fern-and-flour

> build this bakery's homepage from the Crumb template, then add a newsletter signup above the footer

● copypasteui · get_template crumb-bakery

⎿ 6 sections · theme crumb · deps motion, lucide-react

Writing CrumbHero.tsx and 5 more sections, plus the theme tokens in globals.css…

● copypasteui · search_components "newsletter"

● copypasteui · add_component newsletter-cta

Done. The homepage has all six Crumb sections with the signup above the footer. I swapped the placeholder copy for Fern & Flour's details.

MCP server

Connect your editor

A small Node process your editor starts over stdio. It reads the same static files this site publishes, caches them, and works offline from a bundled snapshot.

Automatic (shows changes with --dry-run, backs up your config)

npx copypasteui.dev setup --client claude_code

Or manually: Terminal

claude mcp add --scope user copypasteui -- npx -y copypasteui.dev@latest mcp

Restart the client, then ask: “Add a pricing section from copypasteui with the midnight theme.”

What it can do

plan_website / get_planAsk the owner a few short rounds of questions (as forms where the editor supports them) and save the plan to copypasteui.config.json“help me plan a website for my bakery”
suggest_sectionsPick the template for a trade, explain each section, suggest pages“what should a website for a dog groomer have?”
search_componentsFind sections by keywords, category or tag“find me a pricing table with a monthly/yearly toggle”
get_componentCode, dependencies, theme tokens and integration steps“show me how the Gearwright repair tracker works”
add_componentWrites the .tsx (and theme CSS) into your project and never overwrites a file“add the Verelle stylists section to the about page”
list_themes / get_themeApply one consistent look across every section“switch the site to the Hale theme”
list_templates / get_templateBuild a complete website in one go“build a bakery site from the Crumb template”
fill_business_detailsSwap the sample name, phones and emails for yours; previews first“put Dyson & Sons, 0113 496 0123 and our email in”
list_recipes / get_recipeBackend recipes for the back office: tables, sign-in and access rules for Supabase, Firebase, Convex, Postgres, PocketBase, Cloudflare and more“set up the back office on Firebase”
list_categoriesSee what is in the library“what kinds of sections are there?”

Ready-made requests

Editors that support MCP prompts list these for you. In Claude Code they appear as slash commands. Each one walks the AI through the job step by step with the tools above.

plan-my-website

Asks you about the business, what visitors should do, the look, pages, extras and hosting, one short round at a time, and saves the answers so every later chat builds the same site. Say “quick” for just the essentials.

build-business-website

Follows your saved plan (or asks the quick questions first), picks the template, builds the page, rewrites the copy and fills in your details.

add-online-booking

Adds a booking section that matches the site and connects it to Cal.com, Calendly, Fresha or a simple email form.

build-back-office

Adds the owner's screens (bookings, orders, enquiries, menu, hours) behind a secure sign-in, with the database and access rules set up.

prepare-for-launch

Finds leftover sample details and dead links, checks alt text, legal pages and phone layout, then explains how to deploy.

How it works without a backend

  1. 1.Contributors add components and themes to the GitHub repo.
  2. 2.On deploy, a build script validates them and publishes static JSON under /r/.
  3. 3.The MCP fetches those files, caches them in ~/.cache/copypasteui for 6 hours, and falls back to its bundled snapshot when offline.
  4. 4.Set COPYPASTEUI_REGISTRY to a URL or a local folder to use your own fork or a private registry.

Already using shadcn/ui? Use its CLI instead

CopyPasteUI is a shadcn registry. Add it to your project's components.json once:

{
  "registries": {
    "@copypasteui": "https://copypasteui.dev/r/shadcn/{name}.json"
  }
}

Then install sections and themes by name. The theme brings its fonts (next/font in Next.js) and colour tokens:

npx shadcn@latest add @copypasteui/theme-olea
npx shadcn@latest add @copypasteui/olea-hero @copypasteui/olea-menu
npx shadcn@latest search @copypasteui -q pricing

shadcn's own MCP server (npx shadcn@latest mcp init) reads the same registry, so your agent can search and install CopyPasteUI items without our MCP. Install one theme per project: adding a second one stacks its fonts and overwrites the colours.

The CopyPasteUI CLI

The same package works from a terminal, without an AI editor:

npx copypasteui.dev search "pricing toggle"
npx copypasteui.dev add toggle-tier-pricing --theme olea   # writes components/copypasteui/…
npx copypasteui.dev themes
npx copypasteui.dev setup --dry-run                         # register the MCP with your editors

It never overwrites a file unless you pass --overwrite, and never runs npm for you; it prints the install command instead.

No MCP? Point your agent at llms.txt

Agents that can browse the web can read /llms.txt is a short Markdown map of every template, theme and category with links to the JSON registry, or /llms-full.txt with every component, its tags, dependencies and install commands.

Static JSON API

There is no backend. Everything is plain JSON, rebuilt on every deploy, so you can fetch it from anything.

/r/index.jsonevery component, theme and template, without code

/r/components/{slug}.jsoncode, dependencies, install path and the full prompt

/r/templates/{slug}.jsonsections in order and the full-page prompt ({{THEME}} slot)

/r/themes/{slug}.jsontokens, CSS, Tailwind v4/v3 wiring and the prompt block

/r/shadcn/registry.jsonthe shadcn registry index

Theming

Sections only use shadcn-style tokens: bg-background, text-foreground, bg-primary, border-border, font-display, rounded-lg and friends. If your project already has shadcn/ui tokens, sections pick them up. Otherwise apply one theme once:

npx shadcn@latest add @copypasteui/theme-olea      # or
npx copypasteui.dev add olea-hero --theme olea          # writes theme-olea.css next to it

Every theme has light and dark values, a radius and two fonts. Browse themes.

Back-office backends

The admin screens take data and save actions as props, so they sit on any backend. Each recipe gives the same tables and the same access rules (public, staff, manager, owner) in that backend's own terms, plus server-side protection for /admin.

  • builderYour AI builder's own backend: People building in Lovable, Bolt, Replit or v0 who don't want another account.
  • supabaseSupabase: Most sites: bookings, orders, enquiries and an editable menu, with a generous free tier.
  • firebaseFirebase: Teams already on Google Cloud, or sites that also have a mobile app.
  • convexConvex: All-TypeScript projects that want screens to update live (orders and bookings appearing without refresh).
  • postgresPostgres + Better Auth or Clerk: Developers who want to own the database and choose each piece, or who already run Next.js with Neon.
  • pocketbasePocketBase: Low running costs and full control: one business, one small server, simple backups.
  • cloudflareCloudflare D1 + Access: Sites already hosted on Cloudflare that want the simplest secure admin for a small team.
  • google-sheetsGoogle Sheets (content only): Owners who only need to change the menu, prices and opening hours, and take bookings through a booking service.

Pick one visually on the Back office page.

Licence and contributing

Use anything here in your own and your clients' projects, commercial ones included. The licence, PolyForm Shield 1.0.0, only rules out building a rival: a competing component library, template kit, site generator or MCP service. Each file starts with two notice lines; keep them. Items marked MIT, Apache-2.0 or CC0 keep their own notice.

Adding a section is one folder with two files, checked by CI and credited to you. How to contribute