Introducing the Shadcnblocks IDE Extension

We’ve shipped an IDE extension that lets you browse and install blocks without leaving your editor. No more switching between the browser and your code — search the full library, preview source code, and install with a single click, all from the sidebar.

Why an IDE Extension?

The shadcn CLI is great for installing blocks when you already know what you want. But discovering the right block — scanning thumbnails, comparing variants, checking source code — has always meant jumping to the browser. That context switch adds up, especially when you’re deep in a layout and want to try a few different hero or pricing sections.

The extension brings the full browsing experience into your editor so you can stay in flow.

What It Does

Click the Shadcnblocks icon in the activity bar and the full block library opens in a sidebar panel. You can browse by category (hero, feature, pricing, CTA, footer, testimonial, etc.) or search by name and keyword. Filter by free or pro blocks to narrow things down.

One-Click Install

Found a block you like? Click install and the extension runs the shadcn CLI under the hood — it resolves dependencies, installs required shadcn/ui components, and drops the block into your project. Zero manual setup.

Preview Source Code

Before installing, you can view the full source code of any block directly in the extension. Inspect the implementation, check what components it uses, and make sure it fits your project structure.

Favorites

Save blocks you use often for quick access. Favorites persist across sessions, so your go-to hero and CTA blocks are always one click away.

Always Up to Date

New blocks appear automatically as we add them to the library. No extension updates needed — the sidebar always reflects the latest collection.

Supported IDEs

The extension works with any IDE that supports the VS Code extension marketplace:

Cursor
VS Code
Windsurf
Antigravity

Install it from the extensions panel in your IDE by searching for “Shadcnblocks”, or visit the extension page for direct install links.

Getting Started

Open your IDE and install the Shadcnblocks extension
Click the Shadcnblocks icon in the activity bar to open the sidebar
Browse or search for a block
Click install — the shadcn CLI handles the rest

Setup takes less than a minute. If you have a Pro account, add your API key in the extension settings to unlock pro blocks.

Pro Blocks

All free blocks are available to everyone. If you’re a Pro, Premium, or Elite subscriber, enter your API key in the extension settings to browse and install pro blocks directly from the sidebar. The same access you have on the site works in the extension.

The extension is available now. Install it and start building without leaving your editor.

— Rob