Pro Blocks

Installation

Add production-ready component blocks to your shadcn/ui projects with the shadcn CLI 3.0. Each block is fully functional and ready to customize.

Free blocks

Get started with our collection of free blocks - no license key required.

1. Set up shadcn/ui

   Make sure shadcn/ui is installed in your project. If not, install it now.

2. Configure the registry

   Update your components.json file by adding the shadcnfigma registry:

   {
     "registries": {
       "@shadcnfigma": {
         "url": "https://shadcnfigma.io/api/registry/{name}"
       }
     }
   }
   

3. Start installing

   Browse the Pro Blocks section, find blocks marked as "Free", and use the CLI command shown on each block's page.

Premium blocks

Unlock our complete library of premium blocks with a license key.

1. Set up shadcn/ui

   Make sure shadcn/ui is installed in your project. If not, install it now.

2. Get your license key

   After purchasing a Premium package, you'll receive your license key via email. You can also find it in the customer portal by logging in with your purchase email.

   Your license key looks like this: SHADCNFIGMA-XXXX-XXXX-XXXX-XXXX

3. Add your license key

   Create a .env.local file in your project root and add your license key:

   SHADCNFIGMA_LICENSE_KEY=your_license_key
   

4. Configure the registry

   Update your components.json file to include the license key header:

   {
     "registries": {
       "@shadcnfigma": {
         "url": "https://shadcnfigma.io/api/registry/{name}",
         "headers": {
           "License-Key": "${SHADCNFIGMA_LICENSE_KEY}"
         }
       }
     }
   }
   

5. Start installing

   Browse the Pro Blocks section and use the CLI command shown on each block's page.

How to install blocks

Browse Pro Blocks to explore all available blocks - both free and premium. Each block includes a preview, description, and installation command.

To install any block:

1. Visit the Pro Blocks directory
2. Click on any block to view details
3. Copy the CLI command shown on the block's page
4. Paste and run it in your project's terminal

Example installation commands:

npx shadcn@latest add @shadcnfigma/marketing-hero

npx shadcn@latest add @shadcnfigma/marketing-pricing

The CLI will automatically:

• Download the block's source code
• Install any required dependencies
• Place files in your project's components folder

After installation, the block is yours to customize however you need.