Getting started

1. Install the extension

Install Snapds from the VS Code Marketplace (or the Extensions view — search for Snapds). It requires VS Code 1.85 or newer.

2. Register a package

Open the Components view from the Activity Bar (the Snapds icon), then click the ⚙️ gear in its title bar — or run Snapds: Open Settings from the Command Palette (Cmd/Ctrl+Shift+P). Add a package you want to browse — for example @acme/ui. Snapds introspects its props, types, enums and default values automatically; there is nothing to configure up front.

You can also register packages directly in settings:


// .vscode/settings.json
{
  "snapds.packages": [
    {
      "name": "@acme/ui",
      "version": "*",
      "importPath": "@acme/ui"
    }
  ]
}

The package must be installed in your workspace’s node_modules (Snapds reads its TypeScript types, not a registry). In a monorepo, a package installed in a nested node_modules or built locally is resolved automatically — see How it works → Resolution.

3. Explore the gallery

Open the Components view in the Activity Bar. Search, filter, and browse everything your package exposes, grouped by package. The search box clears with its × button or the Esc key, and each package header stays pinned below the search while you scroll its components — handy for packages that export hundreds of them. Selecting a component opens the Props panel (also available via Snapds: Open Props Panel), where each prop is rendered from its type — enums become selects, booleans become toggles. When the component is an icon from a local source, the panel also shows a live preview of its SVG, read straight from the component’s own source file (never executed).

4. Drop into your code

Drag a component from the gallery into any React file. Snapds writes the JSX and merges its import into the right statement — no manual wiring.


import { Card, Button } from '@acme/ui';
 
export function Toolbar() {
  return (
    <Card>
      <Button variant="primary">Save changes</Button>
    </Card>
  );
}

Prefer the keyboard? Press ⌃⌥⌘I (macOS) or Ctrl+Shift+Alt+I (Windows / Linux) — or run Snapds: Insert Component or Snippet from the Command Palette — to open a spotlight-style picker. Type a component or snippet name, press Enter, and Snapds injects the JSX/snippet and its import(s) at your cursor, no mouse required. See Commands & shortcuts for the full shortcut reference.

5. (Optional) Save your own snippets

Beyond the packaged components, you can capture your own React code as reusable custom snippets. Select some code, press ⌃⌥⌘S (macOS) / Ctrl+Shift+Alt+S (Windows / Linux) — or right-click → Save Selection as Snippet — then name it, pick a category, and confirm the imports Snapds detected. It joins a second Custom Snippets tab in the gallery and drags/injects exactly like a component. Keep it private to your workspace or share it with the team via snapds.config.json.

6. (Optional) Generate skills

Export agent-ready skills so your coding assistant knows your design system on demand. Run Snapds: Generate Skills from the Command Palette, or enable auto-generation in Settings.

Troubleshooting

My package shows no components. Make sure it ships TypeScript types (.d.ts / .tsx) and that its package.json points to them via types, typings, or main. Snapds reads types — not compiled JS.

Nothing appears after registering — confirm the package is installed (node_modules). For locally-built monorepo packages, build them first so the type entry exists.
A polymorphic / as-style component is missing — a compiler pass catches most, but you can add it under manual (see Configuration).
Stale props after an upgrade — introspection is cached by name@version plus your config file’s mtime. Bump the version field or edit snapds.config.json to force a re-parse.