Shadcnblocks VS Code Extension
Browse and install shadcn/ui blocks directly in your IDE.
Features
Block Browser
- 1300+ UI Blocks - Browse hero sections, features, pricing, testimonials, and more
- Search & Filter - Find blocks by name, description, or keywords
- Archetype Filter - Filter by use case: Marketing, App, Portfolio, Ecommerce
- Category Filter - Filter by component type: Hero, Feature, Pricing, CTA, etc.
- Pro/Free Filter - Toggle between all blocks, free only, or pro only
- Favorites - Heart any block to save it; filter to show only favorites
- Thumbnail Previews - Visual previews for all blocks
- One-Click Install - Install blocks directly via
npx shadcn@latest add
- Copy CLI Command - Copy the install command to clipboard
- View Source Code - Preview block code (requires API key for Pro blocks)
Welcome Page
- Shown on first install
- Quick access to browse blocks, set API key, get Pro license
Installation
VS Code Marketplace
Search for "Shadcnblocks" in the VS Code Extensions marketplace.
Open VSX (Cursor, VSCodium)
Available on Open VSX Registry.
Usage
Click the Shadcnblocks icon in the Activity Bar to open the block browser.
Commands
| Command |
Description |
Shadcnblocks: Welcome |
Open the welcome page |
Shadcnblocks: Browse Blocks |
Focus the block browser |
Shadcnblocks: Install Block |
Install a block via CLI |
Shadcnblocks: View Code |
Preview block source code |
Shadcnblocks: Refresh |
Refresh block data |
Configuration
API Key
To access Pro blocks and view source code:
- Get your API key from shadcnblocks.com/dashboard
- Open VS Code Settings (
Cmd+,)
- Search for "shadcnblocks.apiKey"
- Enter your key (starts with
sk_live_)
Settings
| Setting |
Default |
Description |
shadcnblocks.apiKey |
"" |
Your API key for Pro access |
| |
