Quick Setup

Get your first Efferd block installed in a few minutes. Pick the free path or the Pro path.

Before you start

Both paths assume you have:

  • A Next.js app using the App Router
  • shadcn/ui initialized (npx shadcn@latest init)

Free setup

Install free blocks from @efferd. No account or Registry Token required.

1

Add the registry

Merge this into components.json.

components.json

{
  "registries": {
    "@efferd": "https://efferd.com/r/{style}/{name}.json"
  }
}
2

Install a block

Install blocks via the shadcn CLI using the @efferd/{name} syntax.

bash

npx shadcn@latest add @efferd/hero-1

Pro setup

Pro blocks use the same namespace. Requires a Registry Token.

1

Copy your registry token

Open Account → Registry token and copy the token.

2

Add the token

Put that in .env.local at the project root.

.env.local

EFFERD_REGISTRY_TOKEN="registry_..."
3

Configure components.json

Use the object form so the CLI can attach the Authorization header.

components.json

{
  "registries": {
    "@efferd": {
      "url": "https://efferd.com/r/{style}/{name}.json",
      "headers": {
        "Authorization": "Bearer ${EFFERD_REGISTRY_TOKEN}"
      }
    }
  }
}

In a monorepo, add this in the app workspace, then run the CLI from that directory.

4

Install a Pro block

Copy the command from any Pro block preview.

bash

npx shadcn@latest add @efferd/hero-4

Next steps