# Pro Blocks

> Learn how to install Pro Blocks code into your shadcn/ui projects with the shadcn CLI 3.0.

Canonical: https://www.shadcndesign.com/docs/pro-blocks

## Installation

### Pro Blocks (React and Premium packages)

<DocsCta
  title="Pro Blocks need a license"
  description="Pro Blocks code is included in the React and Premium packages. Sign in with the email you purchased with, or get a license to unlock the full registry."
  primaryLabel="Get a license"
  primaryHref="/pricing"
/>

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](https://ui.shadcn.com/docs/installation) now.
2. Find and copy your license key. If you purchased the [React or Premium](/pricing) package, you can find it in [Customer Portal](https://polar.sh/shadcndesign/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.

```json
{
  ...,
  "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.

```bash
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.

### Legacy blocks (React and Premium packages)

In [December 2025's update](/blog/update-december-2025), 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.

```json
{
  ...,
  "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](https://ui.shadcn.com/docs/installation) now.
2. Update your `components.json` file by adding our registry as presented below.

```json
{
  ...,
  "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:

```json
{
  ...,
  "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:

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