Project setup

Configure your Next.js project before installing diarmuradi items: shadcn initialization, components.json, path aliases, and monorepo layout.

For theme tokens, see Dark Mode. Registry configuration is in Quick Setup.

Requirements

• A Next.js app using the App Router
• shadcn/ui initialized with a components.json file
• For gated blocks: a diarmuradi API key from your account and a Core or Full Access plan

Free block samples do not require an account or API key. Templates are downloaded from the site, not installed with the CLI.

Initialize shadcn

If you do not have shadcn/ui set up yet, run the init command in your project root. This creates components.json and adds the default path aliases.

pnpm
npm
yarn
bun
Copy
pnpm dlx shadcn@latest init

Pick the style preset that matches your UI base:

• Base UI projects (default): use a base-* style (for example base-nova)
• Radix UI projects: use a radix-* style (for example radix-nova)
• React Aria projects: use an aria-* style (for example aria-nova)

Your style choice should align with the registry URL you configure in Quick Setup.

components.json

The components.json file is the entry point for the shadcn CLI. It tells the CLI where to install files, which Tailwind settings to use, and which registries you can install from.

A minimal structure (add registries from Quick Setup):

Copy{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {}
}

Path aliases

Running npx shadcn@latest init adds components, utils, ui, lib, and hooks by default. diarmuradi blocks resolve into those paths.

Copy"aliases": {
  "components": "@/components",
  "utils": "@/lib/utils",
  "ui": "@/components/ui",
  "lib": "@/lib",
  "hooks": "@/hooks"
}

Match these paths to your project structure. Alias values must align with the paths in your tsconfig.json.

Monorepo

The shadcn CLI understands monorepo layouts and installs files to the correct workspace paths. See the shadcn monorepo docs for the full reference.

Getting started

Scaffold a new monorepo with:

pnpm
npm
yarn
bun
Copy
pnpm dlx shadcn@latest init --monorepo

After adding registry entries and REGISTRY_TOKEN to your app workspace, install diarmuradi items from the app path, not the repo root.

Copycd apps/web
npx shadcn@latest add @diarmuradi/header-1

File structure

Copyapps
└── web                    # App (routes, pages)
    ├── app
    ├── components
    ├── components.json
    └── package.json
packages
└── ui                     # Shared UI, hooks, utils
    ├── src
    ├── components.json
    └── package.json

Monorepo requirements

• Every workspace needs a components.json
• Define aliases per workspace
• Register @diarmuradi (and @diarmuradi-pro when needed) in the workspace you install from
• Keep style, iconLibrary, and baseColor aligned across workspaces
• For Tailwind CSS v4, leave tailwind.config empty in components.json

Example app workspace components.json:

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

Import shared UI from the workspace package:

Copyimport { Button } from "@workspace/ui/components/button"
import { cn } from "@workspace/ui/lib/utils"

Next steps

• Quick Setup
• Dark Mode
• MCP