docs / adding-a-component

Adding a component takes one file

There is no registry to edit and nothing to import. The library watches components/showcase/ and builds itself from the files it finds there.

1 · Create the file

Drop a self-contained component into components/showcase/YourThing.tsx. Use export function YourThing (or a default export) so the file name and the export match — that is what the Usage tab uses for the import line. Interactive components may start with "use client"; the file still works as-is when copied out.

components/showcase/Pill.tsxTypeScript · React
1// components/showcase/Pill.tsx
2export const meta = {
3  name: "Pill",
4  description: "A compact label with a status dot.",
5  category: "Primitives",
6  tags: ["display", "tailwind"],
7  props: {
8    tone: { type: "select", options: ["live", "draft"], default: "live" },
9    children: { type: "text", default: "Shipping now" },
10  },
11};
12 
13type Props = {
14  tone?: "live" | "draft";
15  children?: React.ReactNode;
16};
17 
18export function Pill({ tone = "live", children }: Props) {
19  const dot = tone === "live" ? "bg-emerald-400" : "bg-amber-400";
20  return (
21    <span className="inline-flex items-center gap-2 rounded-full border border-white/10
22                     bg-white/5 px-3 py-1 text-sm text-white">
23      <span className={`h-1.5 w-1.5 rounded-full ${dot}`} />
24      {children}
25    </span>
26  );
27}

2 · Export the meta object

export const meta is the docs data for your component. It is stripped automatically from the code users copy, so it never leaks into their project.

FieldTypeNotes
namerequiredstringDisplay name, also used as the JSX tag in the Usage tab.
descriptionrequiredstringOne line shown under the title.
categoryrequiredstringSidebar / gallery group, e.g. Primitives.
tagsoptionalstring[]Searchable keywords shown as chips.
propsoptionalPropSchemaLive controls in the preview panel + the props table. Types: select, boolean, text — with optional label (control caption) and multiline (textarea).

3 · That's the whole step

Save the file and it shows up in the sidebar, the home gallery and the props table automatically. If something is off — a missing field, a typo in props.tone.type — the build fails with a message that names the file and the exact field.

Back to the gallerySee an example component

Conventions

  • · One component per file; the file name becomes the URL slug.
  • · Keep it self-contained: no imports from this repo, so pasted code just works.
  • · Styling is up to you — Tailwind classes or inline styles both work.
  • · Validate with pnpm build before committing.