Docs / Shadcn IDE Extension

Shadcn IDE Extension

Browse, search, and install blocks directly from your IDE with the Shadcnblocks extension.

The Shadcnblocks extension lets you browse, search, and install blocks without leaving your editor. Open the sidebar, find the block you need, and add it to your project with a single click.

Supported IDEs

The extension works with any IDE that supports VS Code extensions:

IDEInstall Link
VS CodeInstall in VS Code
CursorInstall in Cursor
WindsurfInstall in Windsurf
TRAE CodeInstall in TRAE Code
AntigravityInstall in Antigravity

Key Features

  • Search & Filter - Quickly find blocks by name, category, or keyword
  • One-Click Install - Add any block to your project with a single click using the shadcn CLI
  • Source Code Preview - View the full source code of any block before installing
  • Favorites - Save blocks you use frequently for quick access
  • Auto-Updates - The extension stays up to date with the latest blocks automatically

Quick Start

  1. Install the extension - Search for “Shadcnblocks” in your IDE’s extension panel, or use an install link above.
  2. Open the block browser - Click the Shadcnblocks icon in the activity bar.
  3. Browse or search - Find blocks by name, keyword, or category. Preview source code before installing.
  4. Install a block - Click the install button to add it via the shadcn CLI. Free blocks work out of the box.

Pro Blocks & API Key Setup

Pro blocks require an API key. Follow these steps to unlock premium blocks:

  1. Get a Pro license - Purchase at shadcnblocks.com/pricing to receive your API key.
  2. Copy your API key - Find it in your dashboard. It starts with sk_live_.
  3. Add the API key to the extension - Open your IDE settings, search for shadcnblocks.apiKey, and paste your key.
  4. Configure components.json - Add the shadcnblocks registry to your project’s components.json: 
    {
  "registries": {
    "@shadcnblocks": {
      "url": "https://shadcnblocks.com/r/{name}",
      "headers": {
        "Authorization": "Bearer ${SHADCNBLOCKS_API_KEY}"
      }
    }
  }
}

For more details on CLI setup, see the shadcn CLI guide.

Video Demos

Visit the extension page for interactive video demos of all features in action.

Next Steps