ShadcnStore

Appearance

Installation ​

Learn how to install and use ShadcnStore blocks in your project. We now support the modern namespace approach with simplified commands!

Prerequisites ​

Before installing blocks, ensure your development environment meets these requirements:

  • Node.js 18+: Required for running the shadcn CLI and package management
  • React/Next.js with Tailwind CSS: A properly configured React or Next.js project with Tailwind CSS setup
  • shadcn/ui initialized: Blocks require shadcn/ui to be properly initialized in your project

TIP

If you haven't set up shadcn/ui yet, follow the official installation guide first.

Installation Methods ​

The modern approach uses clean namespace commands with one-time setup:

Step 1: Configure Registries ​

Add this to your project's components.json:

json
{
  "registries": {
    "@shadcnstore": {
      "url": "https://shadcnstore.com/r/{name}.json"
    },
    "@shadcnstore-pro": {
      "url": "https://shadcnstore.com/r/{name}.json?token=${SHADCNSTORE_TOKEN}",
      "headers": {
        "Authorization": "Bearer ${SHADCNSTORE_TOKEN}"
      }
    }
  }
}

Step 2: Set Environment Variable ​

Add your license key to your project's .env.local file:

bash
SHADCNSTORE_TOKEN=your-license-key-here

Step 3: Install Blocks with Clean Commands ​

Now you can use simple commands:

bash
# Free blocks
npx shadcn@latest add @shadcnstore/hero-section-1

# Premium blocks  
npx shadcn@latest add @shadcnstore-pro/dashboard-advanced

One-time Setup

After the registry configuration, you never need to handle URLs or tokens manually again!

Method 2: Direct URL Installation (Legacy) ​

Deprecated

This method still works but we recommend the namespace approach above for cleaner commands.

For Free Blocks ​

bash
npx shadcn@latest add https://shadcnstore.com/r/[component].json

For Premium Blocks ​

bash
npx shadcn@latest add "https://shadcnstore.com/r/[component].json?token=YOUR_LICENSE_KEY"

Method 3: Environment Variable (Legacy) ​

For scripts or automation:

bash
# Set the environment variable
export SHADCNSTORE_TOKEN="your-license-key"

# Use it in commands
npx shadcn@latest add "https://shadcnstore.com/r/[component].json?token=$SHADCNSTORE_TOKEN"

Method 4: Copy & Paste ​

You can also copy the component code directly from our website:

  1. Browse to the block you want on ShadcnStore blocks
  2. Click "View Code" (requires license for premium blocks)
  3. Copy the component code
  4. Create a new file in your components directory
  5. Paste the code and install any required dependencies

Method 5: Manual Download ​

For advanced users, you can manually download the block files:

  1. Browse to the block you want on ShadcnStore blocks
  2. Click "Download" (requires license for premium blocks)
  3. Extract the downloaded files
  4. Place them in your components directory
  5. Install any required dependencies

Authentication ​

Getting Your License Key ​

  1. Purchase a Personal or Team plan
  2. Visit your dashboard after purchase
  3. Your license key will be displayed in the installation guide

Authentication Methods ​

After configuring registries (Method 1), authentication is handled automatically via environment variables:

bash
# In your .env.local file
SHADCNSTORE_TOKEN=your-license-key

Query Parameter (Legacy) ​

bash
npx shadcn@latest add "https://shadcnstore.com/r/[component].json?token=your-license-key"

Authorization Header (API/CI) ​

For custom tools or CI/CD pipelines:

bash
curl -H "Authorization: Bearer your-license-key" \
  "https://shadcnstore.com/r/[component].json"

Example Installation ​

Let's walk through installing different blocks:

1. Namespace Method (Recommended) ​

After setting up registries and environment variable:

bash
# Install a free hero section
npx shadcn@latest add @shadcnstore/hero-section-1

# Install a premium dashboard component  
npx shadcn@latest add @shadcnstore-pro/dashboard-advanced

# Install multiple blocks
npx shadcn@latest add @shadcnstore/hero-section-1 @shadcnstore-pro/pricing-table

2. Legacy URL Method ​

bash
# Free block
npx shadcn@latest add https://shadcnstore.com/r/hero-section-1.json

# Premium block
npx shadcn@latest add "https://shadcnstore.com/r/dashboard-advanced.json?token=your-license-key"

3. Use in Your Project ​

After installation, import and use the block:

tsx
import HeroSection1 from '@/components/hero-section-1'

export default function Page() {
  return <HeroSection1 />
}

What Gets Installed ​

When you install a block, the CLI will:

  1. Download component files: The main component and any sub-components
  2. Install dependencies: Any required npm packages
  3. Add to components folder: Files are placed in your configured components directory
  4. Update imports: Automatic import path resolution based on your components.json

File Structure ​

Blocks are installed following your components.json configuration:

text
your-project/
├── components/
│   ├── ui/           # shadcn/ui components
│   └── hero-1.tsx    # Installed block
├── lib/
│   └── utils.ts      # Utility functions
└── components.json   # Configuration

Team Licenses ​

If you have a Team license, share your license key with team members (up to 25 people). Everyone can use the same authentication commands.

Team Benefits ​

  • Shared License: One license key for the entire team
  • 25 Team Members: Up to 25 developers can use the same license
  • Commercial Rights: Full commercial usage permissions
  • Priority Support: Direct access to our support team

Troubleshooting ​

Common Issues ​

Namespace Registry Not Found ​

If you get registry errors with the namespace approach:

  • Verify your components.json includes the registries configuration
  • Ensure the SHADCNSTORE_TOKEN environment variable is set correctly
  • Check that your .env.local file is in the project root
  • Restart your development server after adding environment variables

Authentication Errors ​

  • Verify your license key is correct and active in your dashboard
  • Make sure you're using the right namespace (@shadcnstore vs @shadcnstore-pro)
  • For legacy methods, ensure you're quoting URLs with query parameters
  • Try the namespace method as it's more reliable than URL-based authentication

File Path Issues ​

  • Ensure shadcn/ui is properly initialized
  • Check your components.json configuration matches our requirements
  • Verify import aliases in your tsconfig.json
  • Make sure your project structure follows Next.js/React conventions

Missing Dependencies ​

  • Run npm install or yarn install after installing blocks
  • Check that all required shadcn/ui components are installed
  • Some blocks may require additional dependencies listed in the component documentation

Environment Variable Issues ​

  • Use SHADCNSTORE_TOKEN (not SHADCN_STORE_TOKEN) for consistency
  • Place the environment variable in .env.local for Next.js projects
  • For other frameworks, check their environment variable documentation
  • Restart your development server after adding environment variables

Network Issues ​

  • Verify internet connection and HTTPS access
  • Check if your firewall or corporate network blocks registry requests
  • Try again if the registry is temporarily unavailable
  • For CI/CD environments, ensure the environment variable is properly set

Migration from Legacy Methods ​

If you're migrating from URL-based installation:

  1. Add registries configuration to your components.json
  2. Set the environment variable in your project
  3. Update your commands to use namespace format
  4. Test installation of both free and premium blocks

Getting Help ​

If you're still having issues:

  1. Check our FAQ for common solutions
  2. Review the Troubleshooting guide
  3. Join our Discord community for help and discussions
  4. Contact support via our contact form

Next Steps ​

Now that you know how to install blocks:

Ready to install your first block? Visit our block collection to get started! 🎉

Copyright © 2025 ShadcnStore