Pro Blocks

Installation

You can install Pro Blocks with the latest shadcn CLI 3.0.

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 My Orders page after logging in to Lemon Squeezy.
3. In your project root, create .env.local file with the content: SHADCNDESIGN_LICENSE_KEY=your_key_from_lemonsqueezy
4. Update your components.json file by adding our registry as presented below.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "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": {
    "@shadcndesign": {
      "url": "https://shadcndesign-registry.vercel.app/api/registry/{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 below.

# 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"

‍

---

Below is the deprecated method that will be unsupported soon.

Installation (Deprecated method)

1. Ensure shadcn/ui is installed in your project. If not, install it now.
2. Once your shadcn/ui project is installed, install styles dedicated to Pro Blocks. Copy this CLI command: npx shadcn@latest add https://pro-blocks-v4.vercel.app/r/pro-blocks-styles.json
3. Run the command in your project’s terminal - it will install the classes used in our Landing Page blocks.
4. Go to our Pro Blocks page, for example Hero Sections.
5. Copy the selected Pro Block CLI command.
6. Paste the CLI command in your shadcn/ui project’s terminal.
7. Find and copy your license key. If you purchased the Premium package, you can find it in My Orders page after logging in to Lemon Squeezy.
8. Paste your license key after the “key=” in your project’s terminal. For example: npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-1&key=YOUR_LICENSE_KEY"
9. Run the command and follow the instructions in the terminal.
10. If your license key is valid, the component will be installed in your project.

Installing multiple blocks at once (Deprecated method)

You can install multiple Pro Blocks at once. Use component names separated by "+". For example, to install Hero Section 4 and Feature Section 2:

npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-4+feature-section-2&key=YOUR_LICENSE_KEY"