Quick Setup

Get your first diarmuradi item installed quickly. This page has two paths. Pick the one that matches what you want to install.

In a hurry? Generate a tailored setup prompt or components.json for your AI agent.

Before you start

Both paths assume you have:

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

Pick a style preset that matches your UI base: base-* for Base UI (default), radix-* for Radix UI, or aria-* for React Aria. Point the public registry URL at the matching style:

diarmuradi.com/r/{style}/{name}.json

Examples: base-nova, radix-nova, aria-nova. Use the style switcher when browsing Blocks and copy install commands from the preview so the namespace and item name are exact.

Free setup

Install free block samples from the public registry. No account or API key required.

1. Add the public registry

Copy{
  "registries": {
    "@diarmuradi": "https://diarmuradi.com/r/{style}/{name}.json"
  }
}

The {style} placeholder is replaced with the style in your components.json (for example base-nova). You can also hardcode it:

Copy{
  "registries": {
    "@diarmuradi": "https://diarmuradi.com/r/base-nova/{name}.json"
  }
}

2. Install a block

Browse Blocks and copy the CLI command from the preview toolbar:

Copypnpm dlx shadcn@latest add @diarmuradi/header-1

3. Theme tokens

Blocks use CSS variables from your shadcn theme. If colors look off, align your global stylesheet with the shadcn theming docs. For dark mode, see Dark Mode.

Plan setup

Install the full block library with an API key. Requires a Core or Full Access plan.

Templates (like Lusmu) are not installed via the CLI. Download them from the site after purchase.

1. Generate an API key

Sign in, open your account menu, and generate an API key. Copy it when shown. It starts with dm_ and is only visible once.

2. Add the API key

CopyREGISTRY_TOKEN=dm_your_api_key_here

Add this to .env.local at your project root.

3. Configure components.json

Merge into your existing components.json:

Copy{
  "registries": {
    "@diarmuradi": "https://diarmuradi.com/r/{style}/{name}.json",
    "@diarmuradi-pro": {
      "url": "https://diarmuradi.com/api/registry/bearer/{name}",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

If you are using a monorepo, read Project setup first.

4. Install a gated block

Copypnpm dlx shadcn@latest add @diarmuradi-pro/header-7

Copy the exact name from any paid block preview. Match your site style to the {style} in your public registry URL.

Security notes

• Never commit your API key to version control
• Keep .env.local in .gitignore
• Use the ${REGISTRY_TOKEN} syntax in components.json so the CLI expands the key from the environment
• Rotate keys from your account if you suspect a leak

Copy.env
.env.local
.env.*.local

Test your setup

Confirm the CLI can reach your registries:

pnpm
npm
yarn
bun
Copy
pnpm dlx shadcn@latest list @diarmuradi

pnpm
npm
yarn
bun
Copy
pnpm dlx shadcn@latest search @diarmuradi --query header

pnpm
npm
yarn
bun
Copy
pnpm dlx shadcn@latest view @diarmuradi/header-1

For gated items:

pnpm
npm
yarn
bun
Copy
pnpm dlx shadcn@latest view @diarmuradi-pro/header-7

On diarmuradi.com, your browser session grants preview access. The CLI uses your API key via REGISTRY_TOKEN.

Next steps

• Project setup
• Registry
• Dark Mode
• MCP