ShadcnStore

Appearance

Installation ​

Learn how to install and use ShadcnStore blocks in your project. We support multiple installation methods to fit your workflow.

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 ​

Choose the method that works best for your workflow:

The easiest way to install blocks is using the shadcn CLI. This method automatically handles dependencies and places files in the correct locations.

For Free Blocks ​

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

For Premium Blocks ​

Premium blocks require authentication with your license key:

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

Quote the URL

Always wrap URLs with query parameters in quotes to handle special characters properly.

Method 2: Environment Variable (Advanced) ​

For team environments or when installing multiple blocks, set your license key as an environment variable:

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

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

Method 3: 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 4: 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 ​

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: License your-license-key" \
  "https://shadcnstore.com/r/[component].json"

Example Installation ​

Let's install a hero section block:

1. Install a Free Block ​

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

2. Install a Premium Block ​

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

3. Use in Your Project ​

After installation, import and use the block:

tsx
import Hero1 from '@/components/hero-1'

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

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 ​

Authentication Errors ​

  • Verify your license key is correct and active
  • Make sure you're quoting URLs with query parameters
  • Try the query parameter method as it's most reliable

File Path Issues ​

  • Ensure shadcn/ui is properly initialized
  • Check your components.json configuration
  • Verify import aliases in your tsconfig.json

Missing Dependencies ​

  • Run npm install after installing blocks
  • Check that all required shadcn/ui components are installed

Network Issues ​

  • Verify internet connection
  • Check if your firewall allows HTTPS requests
  • Try again if the registry is temporarily unavailable

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