copypasteui

Contribute

The most useful thing you can add is a new trade.

Everything lives in one GitHub repository. Open a pull request, CI checks it, and once merged it appears on the site and in everyone's editor on the next deploy, credited to you.

No code? Ask for a tradeTell us the kind of business that's missing. The most-requested get built first.Request a trade Found a problem?Something broken, unclear or wrong in a prompt? Say so and it goes on the list.Open an issue Write code? Add a templateSix sections for one fictional business in a trade we don't cover yet.How to add one

Add a template for a new trade

A template is a collection: one fictional business with its own theme and six sections written for its trade: a hero with navigation, the offering (menu, services, rooms, products), a story or showcase, proof (reviews or results), the action the business really needs (book, call, order, quote, donate) and a footer.

Covered so far: Food & drink (9) · Hospitality & travel (8) · Shops & farms (7) · Health & beauty (10) · Home & trades (6) · Professional services (5) · Family & community (6) · Tech & startups (3). Gaps worth filling: opticians, tattoo studios, driving schools, removals, tutors and pharmacies.

  1. Add the six sections (below), each with "collection": "<template-slug>" in its meta.json.
  2. Add a theme for the brand in registry/themes/<slug>.json.
  3. Add registry/templates/<slug>.json with name (“Brand — Kind of business”), description, brief (the businesses it suits, e.g. “a florist, flower farm or gift shop”; the plan page and the MCP match on it), theme, author and sections in page order.
  4. Add its slug to an industry group in apps/web/src/lib/industries.ts.

Add a section

registry/components/<category>/<your-slug>/
  component.tsx
  meta.json

Categories: navbar, hero, logos, features, how-it-works, stats, testimonials, pricing, faq, cta, team, contact, gallery, products, menu, events, blog, footer, pages, admin, background, buttons, cards.

meta.json

{
  "slug": "marlowe-lookbook",
  "name": "Marlowe Lookbook",
  "description": "Autumn lookbook with a swipeable rail of outfits and prices.",
  "category": "gallery",
  "tags": ["fashion", "boutique", "carousel"],
  "author": { "name": "Your Name", "github": "your-github" },
  "dependencies": { "motion": ">=12.0.0" },
  "collection": "marlowe-boutique",
  "createdAt": "2026-10-21"
}

Leave out collection for a section that isn't part of a template. Add usage for page-level pieces (utility pages, back-office screens) to tell the AI how to wire them up.

Rules

One self-contained file
component.tsx starts with "use client" and has a named default export.
Three imports
Only react, motion and lucide-react, and meta.json lists exactly what you import. Need another package? Open an issue first.
Safe
No fetch, storage, cookies, eval or dangerouslySetInnerHTML. Data and save actions come in as props.
Themeable
Theme tokens (bg-background, text-primary, border-border, font-display, rounded-lg…), not hard-coded colours.
Looks made by a person
CI rejects what makes a section read as AI output: blurred colour blobs, gradient text, neon glows, the Sparkles icon, emoji, 4.9-star ratings, buzzwords like “seamless” or “unlock”, and the same fade-up on everything. Write specifics instead: names, places, prices, hours.
Original work
Fictional brands and your own copy. No real logos or copied designs. Photos only from Unsplash (free, not Unsplash+).
Works for everyone
Fits a 360px phone without scrolling sideways, works with a keyboard, and calms down for reduced motion.

If a flagged pattern really is the point, as in an aurora background, allow it with a comment that says why: // design-ok: glow-blob — the aurora is the effect.

Check it locally

npm install
npm run registry:validate   # the same checks as CI
npm run check:design        # the "looks made by a person" report
npm run dev                 # preview at http://localhost:3000/components

Look at it in a few themes, light and dark, at phone width. You don't need to make screenshots: CI renders thumbnails and share images.

Add a theme

Copy an existing file in registry/themes/. Every token needs a light and a dark value, plus a radius and two fonts. The validator checks contrast in both modes and tells you which pair to fix.

Add a backend recipe

Recipes set up the back office on one backend. Each follows the shared data model and access table, creates the first owner and protects /admin on the server. CI rejects one that doesn't. Appwrite, Xano, Directus or a builder we don't cover would all be welcome. See the current recipes →

Credit and licence

You keep the copyright and you're credited on everything you add. Contributions are shared under the project licence (PolyForm Shield 1.0.0), and you can mark your own sections or themes MIT, Apache-2.0 or CC0 instead. You're free to publish them elsewhere too.

Read the full guide on GitHub