Registry

Every framecn component, free or Pro, installs from the @framecn registry. Free components need no setup. Pro components, such as Node Reveal, use the same namespace with your API key attached (see framecn Pro).

Setup

Add this namespace to your components.json registries:

Copy{
  "registries": {
    "@framecn": "https://framecn.dev/r/{name}.json"
  }
}

Usage

Install a free component by its registry name:

bunnpmpnpmyarn
Copy
$ pnpm dlx shadcn@latest add @framecn/caption-highlight

Without a registry alias, use the full URL:

bunnpmpnpmyarn
Copy
$ pnpm dlx shadcn@latest add https://framecn.dev/r/caption-highlight.json

Components install into components/framecn/ and depend on @editframe/react. Browse the component gallery for previews and installation details.

framecn Pro

Pro subscribers can install any Pro component, such as Node Reveal, with the shadcn CLI using a personal API key.

1. Generate an API key on your dashboard. It is shown once — copy it.
2. Add the key to your project's .env:

CopyFRAMECN_API_KEY=fcn_...

3. Attach the key to the @framecn registry in components.json:

Copy{
  "registries": {
    "@framecn": {
      "url": "https://framecn.dev/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${FRAMECN_API_KEY}"
      }
    }
  }
}

4. Install Pro components exactly like free ones:

bunnpmpnpmyarn
Copy
$ pnpm dlx shadcn@latest add @framecn/node-reveal

Free components ignore the key, so this one entry covers both. Regenerating a key immediately invalidates the previous one. Requests fail with 401 for a missing or invalid key and 403 without an active Pro plan.