shadcncraft
Browse, preview and install shadcncraft blocks, components and apps for shadcn/ui without leaving VS Code or Cursor. Every item has a matching Figma component, so design and code stay aligned.
What you get
- Catalog in your sidebar. 290+ blocks, components and apps grouped by category, with light and dark thumbnails that follow your editor theme. Filter by Marketing, Apps, E-Commerce, AI, free or Pro, and save favorites.
- Live previews. Open any item in an editor tab, switch between Preview and Code, and read the source with syntax highlighting.
- One-click install. Runs the shadcn CLI in the integrated terminal, exactly as the docs describe, so your project keeps a standard shadcn/ui setup. Free items install without an account.
- Your project's style. Follows the library (Radix UI or Base UI) and style preset in your components.json, or set them in Settings.
- Open in Figma. Jump from any item to its component in the shadcncraft Figma kit.
- Pro from the editor. Compare bundles, pay in the editor's browser tab, and your license connects automatically. Already a customer? Add your key once and it is used for every install.
Get started
- Install the extension and open a project that has a
package.json. If shadcn/ui is not set up yet, the extension offers to run shadcn init for you.
- Open the shadcncraft view in the Activity Bar, or run shadcncraft: Browse Blocks & Components from the Command Palette.
- Pick a free item and press Install. The shadcn CLI runs in a terminal and adds the files to your project.
Pro and licenses
Pro items need a shadcncraft license. Press Get Pro on any Pro item to compare the Pro React and Pro Figma + React bundles and buy inside the editor. Payment is handled by Polar. When it completes, the license connects to this editor and the item you started from installs.
Already have a key? Press Add license key, paste it, and the extension activates this editor for you. Enterprise keys need no activation. Keys are stored in the editor's secret storage, never in your project or settings.
Team and Single licenses have a fixed number of seats. If every seat is in use, the extension offers Upgrade bundle and Manage seats in the Polar portal.
Requirements
- VS Code 1.93 or newer, or Cursor. Windsurf and other VS Code based editors work with the checkout in your system browser.
- Node.js 18 or newer, for the shadcn CLI.
- A project with a
package.json. Free items need nothing else; installs use the shadcn CLI, so the same components.json rules as the CLI apply.
Commands
| Command |
What it does |
| shadcncraft: Browse Blocks & Components |
Focus the catalog |
| shadcncraft: Search Catalog |
Focus the catalog search box |
| shadcncraft: Install Item |
Install an item by name |
| shadcncraft: View Item Source |
Open an item's source read-only |
| shadcncraft: Get Pro |
Open the pricing panel |
| shadcncraft: Add license key |
Add or replace your license key |
| shadcncraft: Clear License Key |
Remove the stored key |
| shadcncraft: Refresh Catalog |
Reload the catalog from the registry |
| shadcncraft: Settings |
Project status, library and style, license |
Settings
| 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, kept for existing configs. |
shadcncraft.rulesTarget |
[".claude/rules", ".cursor/rules"] |
Where UI Rules are written on install, when enabled. |
shadcncraft.experimental.uiRules |
false |
Write UI Rules attached to installed items. |
shadcncraft.siteUrl |
empty |
Advanced: route checkout, license validation, and registry requests to another shadcncraft.com deployment. Reload after changing. Licenses and catalog caches are isolated per site. |
Privacy
The extension has no telemetry of its own. It talks to these services, and nothing else:
- shadcncraft.com for the catalog, previews, thumbnails, source and installs. Requests for Pro items and license checks carry your license key and the 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.
- polar.sh for checkout, opened in the editor's browser tab or your system browser. Card details never pass through the extension.
- GitHub, only when you install an app, which clones its repository.
- Figma, only when you press Open in Figma.
The extension watches terminals with shell integration for shadcncraft install commands that fail for licensing reasons, so it can offer Get Pro. It reads the output of those commands only, and nothing leaves your machine.
Support
Docs: shadcncraft.com/docs/registry/ide-extension. Help: shadcncraft.com/support.
| |
