Registry

This project is a shadcn registry — a collection of components distributed as source code over HTTP. The shadcn CLI reads a JSON descriptor for each item and copies the files straight into your project.

Installing an item

Point the CLI at any item's JSON URL:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/button.json
Copy

The CLI resolves dependencies, installs npm packages, and writes the files to components/ui/<name>/. You own the code from that point on.

Registry structure

Each item is declared in registry.json and built into a static JSON file under public/r/. A typical entry looks like this:

Copy{
  "name": "button",
  "type": "registry:ui",
  "dependencies": ["@base-ui/react", "@stylexjs/stylex"],
  "files": [
    {
      "path": "registry/bases/stylex/button/button.tsx",
      "type": "registry:ui",
      "target": "components/ui/button/button.tsx"
    },
    {
      "path": "registry/bases/stylex/button/button.stylex.ts",
      "type": "registry:ui",
      "target": "components/ui/button/button.stylex.ts"
    }
  ],
  "registryDependencies": ["stylex-tokens"]
}

• dependencies — npm packages the CLI installs for you.
• registryDependencies — other items in this registry that get pulled in automatically. Every component depends on stylex-tokens, which installs the shared tokens.stylex.ts.
• files — each component ships its .tsx and .stylex.ts side by side.

Shared tokens

The stylex-tokens item is a registry:lib that installs components/ui/tokens.stylex.ts. It is the single source of truth for theming and is a registryDependency of nearly every component, so you rarely install it by hand. See Theming for details.

Building the registry

If you fork this project, regenerate the public/r/*.json files after editing registry.json:

Copypnpm registry:build