Pro Blocks

Installation

Premium blocks

You can install Pro Blocks with the latest shadcn CLI 3.0. The Pro Blocks work with both the Radix UI and Base UI versions of shadcn/ui — the registry automatically serves the variant matching your project.

1. Ensure shadcn/ui is installed in your project. If not, install it now.
2. Find and copy your license key. If you purchased the Premium package, you can find it in Customer Portal page after logging in with your email.
3. In your project root, create .env.local file with the content: SHADCNDESIGN_LICENSE_KEY=your_license_key
4. Update your components.json file by adding our registry as presented below.

{
  ...,
  "registries": {
    "@shadcndesign": {
      "url": "https://www.shadcndesign.com/api/registry/styles/{style}/{name}",
      "headers": {
        "X-License-Key": "${SHADCNDESIGN_LICENSE_KEY}"
      }
    }
  }
}

5. Install our styles: npx shadcn@latest add @shadcndesign/styles
6. That's it, you are ready to go! You can install the components by following the examples on the Pro Blocks pages.

Install a component from the registry
npx shadcn@latest add @shadcndesign/hero-section-1

Install multiple components from the registry
npx shadcn@latest add @shadcndesign/feature-section-1 @shadcndesign/feature-section-2

View a component from the registry
npx shadcn@latest view @shadcndesign/tagline

Search with query in the registry
npx shadcn@latest search @shadcndesign --query "hero"

Radix UI and Base UI

Our registry ships every Pro Block in two variants: one built on Radix UI and one built on Base UI. You don't have to choose anything manually — the shadcn CLI replaces the {style} placeholder in the registry URL with the style from your components.json, and we serve the matching variant:

• Base UI styles (base-vega, base-nova, base-maia, etc.) get the Base UI variants.
• Radix styles (radix-vega, radix-nova, etc.) and legacy styles (new-york, default) get the Radix UI variants.

Blocks import primitives from your local @/components/ui folder, so they always match the shadcn/ui components already installed in your project. Themes and styles are shared between both variants.

Already set up with the previous registry URL? No action needed — https://www.shadcndesign.com/api/registry/{name} keeps working and always serves the Radix UI variants. Switch to the new URL above only if you want automatic Radix/Base UI selection.

Premium legacy blocks

In December 2025's update, we refactored Pro Blocks to introduce updated styles and content.

If you want to continue using the pre-refactor blocks, or if you're working with the Figma kit from October 2025 or earlier and need to stay consistent with those versions - update your components.json to point to the legacy registry URL shown below.

{
  ...,
  "registries": {
    "@shadcndesign": {
      "url": "https://shadcndesign-registry.vercel.app/api/registry/{name}",
      "headers": {
        "X-License-Key": "${SHADCNDESIGN_LICENSE_KEY}"
      }
    }
  }
}

Free blocks

1. Ensure shadcn/ui is installed in your project. If not, install it now.
2. Update your components.json file by adding our registry as presented below.

{
  ...,
  "registries": {
    "@shadcndesign": {
      "url": "https://shadcndesign-free.vercel.app/r/{name}.json"
    }
  }
}

If your project uses the Base UI version of shadcn/ui, point the registry at our style-aware endpoint instead — free blocks don't require a license key:

{
  ...,
  "registries": {
    "@shadcndesign": {
      "url": "https://www.shadcndesign.com/api/registry/styles/{style}/{name}"
    }
  }
}

3. Install the blocks by following the examples on the Pro Blocks pages. For example, to install the Hero Section 1, run:

npx shadcn@latest add @shadcndesign/hero-section-1