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 clone complete apps from GitHub.

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. Git and a GitHub account are needed only for cloning complete apps.

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. Apps are a separate purchase and appear under Pro.
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. Previews render the item in its default style, not in your project's style preset.

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

Complete apps are separate purchases with GitHub repository access, so a registry license key does not unlock them.

In the Polar portal, open your purchase, claim its GitHub repository benefit, and accept the collaborator invitation. See purchase-to-repository setup.
Make sure Git is installed and your editor's GitHub authentication uses the same account.
Filter by Apps, select the app, and choose Install app. View app website opens the product page, and the preview tab shows the live demo.
Choose a parent folder in the editor's clone flow. The app is cloned into a new folder, not into your current project.
Open the cloned folder and follow its README to install dependencies, configure environment variables, and run it.

The extension clones the source only. If the clone fails, check that the GitHub account your editor uses can open the repository.

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, cloned apps, 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.
App clone fails: verify Git is installed and the GitHub account your editor uses can open the repository.
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; to GitHub only when you clone an app; 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.