shadcncraft IDE Extension for VS Code and Cursor

The shadcncraft extension puts the registry in your editor. Browse previews, install blocks and components with the shadcn CLI, buy Pro or connect an existing license without leaving the editor, and install complete apps through the native registry.

It works in VS Code 1.93 or newer and in compatible editors, including Cursor, Antigravity, and Windsurf.

Requirements

VS Code 1.93 or newer, or a compatible editor.
Node.js 18 or newer, with npm and npx available in the editor terminal. Open Terminal > New Terminal and run node --version. If it is missing, install Node.js and restart the editor.
A React project with a package.json, set up as described in the shadcn framework guides. Browsing and previews work without a project; installs need one.
Network access to shadcncraft.com. Complete apps need an initialized Next.js/shadcn project.

The extension runs the shadcn CLI with npx, even in projects that use pnpm, yarn, or bun. Keep the package manager your project uses installed as well.

Install the extension

The extension is free and distributed through Visual Studio Marketplace for VS Code and Open VSX for Cursor, Antigravity, and Windsurf. Pro registry access uses your bundle license; there is no separate extension purchase.

VS Code: shadcncraft on the Visual Studio Marketplace
Cursor, Antigravity, and Windsurf: shadcncraft on Open VSX

Open the Extensions panel from the Activity Bar, or choose View > Extensions.
Search for shadcncraft and select the extension published by shadcncraft (ID shadcncraft.shadcncraft).
Choose Install and reload if prompted.
Open the shadcncraft icon in the Activity Bar, or run shadcncraft: Browse Blocks & Components from the Command Palette (Command+Shift+P on macOS, Ctrl+Shift+P on Windows and Linux).

Install the extension separately in each editor you use. Cursor and Windsurf serve extensions from their own Open VSX mirrors, so a new version can take a little longer to appear there.

The first time it opens, the extension shows a welcome page with your project and license status and a short guide. Reopen it any time with shadcncraft: Welcome.

Browse and preview

The sidebar lists blocks, components, and complete apps grouped by category, with light and dark thumbnails that follow your editor theme.

Search matches names and descriptions.
Category: Marketing, Application, E-Commerce, or AI.
Type: Blocks, Components, or Apps.
Access: Free or Pro. Complete apps use the same Pro registry license as Pro blocks.
Favorites: the heart shows only saved items. Hover a card to save it.

Select an active filter again to clear it. The catalog omits standard shadcn/ui items and hooks; hooks are still installed as dependencies when a component needs them.

Selecting an item shows its details in the sidebar and opens a live preview in an editor tab. The preview is the same interactive example as on the website, so it needs a network connection but no license. Switch to Code to read the source with syntax highlighting; Pro source needs a license. Open in Figma appears when the item has a matching component in the shadcncraft Figma kit. Block previews follow the selected style preset. Complete apps show their hosted demo.

Use the refresh icon in the sidebar title bar, or shadcncraft: Refresh Catalog, to reload the catalog.

Install blocks and components

Open the project folder that contains package.json with File > Open Folder. In a multi-root workspace the extension uses the first folder.
Select an item and choose Install.
If the project has no components.json, accept Run init and complete the shadcn setup in the terminal, then choose Install again.
Follow the shadcn CLI in the shadcncraft terminal. It may ask about dependencies or overwriting existing files; review your changes before accepting an overwrite.
Check the files the CLI added, import the component into a page, and run your project's dev script to see it.

The sidebar shows the install status. CLI started means the command is running; when your editor's shell integration reports the exit status, the status changes to success or failure. Show terminal returns to the terminal while it is open.

Every item shows the CLI command it runs under Install with CLI, with a copy button. Free items use a public URL such as https://shadcncraft.com/r/radix-vega/avatar-stack and need no license. Pro items use the @shadcncraft registry alias:


$ pnpm dlx shadcn@latest add @shadcncraft/<item>

The extension adds the alias to components.json when an install needs it, and passes your saved license to the terminal environment. It never writes your key to a .env file. To run these commands in other terminals, follow the registry installation guide.

Installs need a trusted workspace. In a restricted workspace you can still browse and preview.

Pro items

Installing a Pro item or opening its source without a license offers Get Pro and Add license key.

Get Pro from the editor

Get Pro opens a pricing panel with the Pro React and Pro Figma + React bundles in Single, Team, and Enterprise licenses, with current prices. Choose a bundle to pay through Polar. In recent VS Code and in Cursor the checkout opens in a browser tab inside the editor; other editors open your system browser. When payment completes, the license connects to this editor automatically, and the item you started from installs.

Pro bundles are a one-time purchase. Existing customers can upgrade to a bigger bundle or more seats by paying the difference.

Add an existing license key

Choose Add license key on a Pro item, in Settings, or run shadcncraft: Add license key, and paste the key from your purchase email or the Polar portal.

Single and Team keys need a seat for each editor. The extension offers to activate this editor with a label such as "Cursor - my-macbook", using one seat. If you already activated this machine on the website, choose Use an existing instance name instead.
Enterprise keys connect immediately; they need no activation.

Keys are stored in the editor's secret storage, never in your project or settings. The saved key is checked again on startup. If every seat is in use, the extension offers Upgrade bundle and Manage seats in the Polar portal.

Settings shows the license status and your activation label without showing the key. Update license key replaces it; Remove license disconnects this editor without deactivating the seat. Both also close shadcncraft install terminals, which still carry the previous key.

Installs from the terminal

If you type a shadcncraft install command into a terminal yourself and the registry refuses it for licensing reasons, the extension notices (in terminals with shell integration) and offers Get Pro or Add license key.

Install complete apps

Version 0.3.0 includes Banking, HR Dashboard, Sales & Marketing, AI Chat, and ClearFlow. All five install through the native registry using your Pro license.

Open an initialized Next.js/shadcn project. Use a new project for your first install, or review any overwrite prompts in an existing project.
Add your Pro license key in the extension’s Settings.
Filter by Apps, select an app, and add the shadcncraft registry if prompted.
Choose Install app and follow the shadcn CLI in the terminal. It installs the app’s pages, components, and dependencies into your current project.
Follow the app’s product page for routes and any additional setup, then start your project’s dev server. View app website opens that guide, and the preview tab shows the hosted demo.

App	Registry item	Start route
Banking	`banking-dashboard-1`	`/banking/overview`
HR Dashboard	`hr-dashboard-1`	`/hr/dashboard`
Sales & Marketing	`sales-marketing-dashboard-1`	`/sales`
AI Chat	`ai-chat-1`	`/ai-chat`
ClearFlow	`clearflow-1`	`/clearflow`

Every app includes a copyable Install with CLI command, for example:


$ pnpm dlx shadcn@latest add @shadcncraft/banking-dashboard-1

App installs use your existing Pro access; GitHub repository invitations are no longer part of the installation flow. Refresh Catalog updates live blocks and components. Update the extension itself to get a newly bundled app catalog.

Settings

Open Settings from the sidebar footer, from an item's detail view, or with shadcncraft: Settings.

Project status checks the first open folder for components.json and the shadcncraft registry alias, with Set up shadcn/ui, Add registry, and Recheck actions.
Library and style chooses Radix UI or Base UI and one of the visual presets. Auto follows your project's components.json and falls back to Vega. This affects browsing, source previews, and free installs; Pro installs follow the {style} in your project's registry alias, resolved by the CLI.
License adds, updates, or removes your key, and shows seat actions when needed.
Help links to these docs and support.

Editor settings, under shadcncraft in your editor's settings UI:

Setting	Default	Description
`shadcncraft.componentLibrary`	`auto`	Radix UI or Base UI. Auto follows `components.json`.
`shadcncraft.stylePreset`	`auto`	Vega, Nova, Maia, Lyra, Mira, Luma, Sera, or Rhea. Auto follows `components.json`.
`shadcncraft.registryStyle`	`auto`	Legacy combined setting (`radix-vega`), kept for existing configurations.
`shadcncraft.siteUrl`	empty	Advanced: route requests to another shadcncraft.com deployment. Reload after changing.

Favorites are stored in the editor's global state and do not sync between machines.

Update or remove the extension

Marketplace installs update automatically when your editor's automatic updates are on; otherwise choose Update in the Extensions panel. Refresh Catalog reloads registry data, not the extension.

Uninstalling the extension does not remove installed components, app files, or your saved license.

Troubleshooting

node, npm, or npx not found: install Node.js and restart the editor so its terminal picks up the new PATH.
components.json exists but init is offered: the file must be valid JSON in the first workspace folder. Fix it and choose Install again.
The key is refused: run shadcncraft: Add license key again. Single and Team keys need a free seat; Manage seats in the Polar portal shows which machines hold one.
A Pro install fails in the terminal: read the CLI output. The extension offers Get Pro or Add license key when the registry refused the license.
Wrong style installed: the CLI follows components.json; check its style and registry alias as well as the extension's Library and style.
No items match: clear the active filters; Free hides apps and Pro items.
An app is missing: update the extension to 0.3.0 or newer, then clear the catalog filters.
App installation fails: use an initialized Next.js/shadcn project, check your Pro license and registry configuration, and read the terminal output.
Thumbnails or previews are missing: they load from shadcncraft.com and need a network connection.

See registry troubleshooting for more help.

Privacy

The extension has no telemetry of its own. It talks to shadcncraft.com for the catalog, previews, source, license checks, and checkout; to Polar for payment, in a browser; and to Figma only when you choose Open in Figma. Requests for Pro items carry your license key and activation label. When you buy or add a key, the extension sends the editor name and your computer's host name as the activation label, for example "Cursor - my-macbook", so you can recognize the seat in the Polar portal. Card details never pass through the extension.