Visual component gallery
Browse every component from your registered packages in a dedicated sidebar — searchable, grouped by package, expand or collapse all.
For React + TypeScript teams
Your design system, inside VS Code
Snapds turns any React component package into a visual gallery. Browse components, drop them as ready-to-use JSX with imports handled for you, and export agent-ready skills — without leaving your editor.
Features
Everything you need to ship from your design system
Snapds meets you where you already work — inside the editor — and removes the busywork between picking a component and running your app.
Drag & drop JSX
Drop a component into any React file. Snapds writes correct JSX with sensible tab-stops so you can tweak values immediately.
Smart import management
New imports are merged into the right statement without duplicates — including multi-line, Prettier-formatted imports.
Quick Component Search
Open a spotlight-style command palette with a keyboard shortcut, type any component name, and inject it at the cursor — same snippet and import as drag & drop.
Blazing performance
mtime-based caching and differential updates keep introspection and the gallery fast, even on large monorepos.
Agent-ready skills
Export your component contract as skill docs so coding agents use your design system without re-reading source or burning tokens.
See it in action
Every workflow, zero context switching
Everything happens inside VS Code — browse, drop, generate — without touching a browser or a docs page.
Button@acme/ui
| Prop | Type | Req |
|---|---|---|
| variant | "primary" | "ghost" | ✓ |
| size | "sm" | "md" | "lg" | |
| onClick | () => void | |
| disabled | boolean | |
| children | ReactNode | ✓ |
How it works
From package to production JSX in four steps
No config to learn up front. Register a package and Snapds handles the introspection for you.
- 1
Register a package
Add a package like @acme/ui in Snapds Settings. It introspects props, types, enums and defaults automatically.
- 2
Explore the gallery
Open the Components view in the Activity Bar. Search, filter and browse everything your package exposes.
- 3
Drop into your code
Drag a component into a React file — the JSX and its import are written for you, no manual wiring.
- 4
Generate skills
Optionally export agent-ready skills so your assistant knows your design system on demand.
Agent-ready skills
Teach your coding agent your design system
Snapds exports a compact dictionary plus on-demand detail, so assistants use your components correctly — without re-reading source or burning context tokens.
Dictionary + on-demand detail
A tiny always-loaded index lists components and links to per-component detail loaded only when needed, so context windows stay small.
A format for every agent
Generate skills for Claude, Cursor, Windsurf, Copilot, Cline, Augment, or an assistant-agnostic AGENTS.md — pick any combination.
Team or personal destinations
Write committable, team-shared skills to the repo root, or to any custom folder you keep outside it.
Incremental auto-generation
Enable Auto-generate and Snapds regenerates the index and only the new detail files as your selection changes.
Configuration
Sensible defaults, with overrides when you need them
Three layers, each optional. Start with zero config and add structure only when your team needs it.
Level 1
Auto introspection
By default Snapds parses your TypeScript components to determine props, types and default values.
Level 2
Team / workspace
Add a snapds.config.json at the repo root for shared overrides, custom snippets and ignore lists.
Level 3
User settings
Personal package registrations and selections live in your workspace .vscode/settings.json.
FAQ
Questions, answered
Which projects does Snapds work with?
React + TypeScript monorepos. It reads component metadata via react-docgen-typescript plus the TypeScript compiler API, and requires VS Code 1.85 or newer.
Does Snapds only work in VS Code?
Snapds is built for VS Code (1.85+) and is published to both the Visual Studio Marketplace and the Open VSX Registry. Open VSX makes it installable in VS Code-compatible editors such as Cursor, Windsurf, and VSCodium — but Snapds has only been tested in VS Code, so those editors aren't officially supported yet.
Can I use it with a local design system like shadcn/ui?
Yes. Beyond npm packages, Snapds indexes in-repo component folders. A shadcn components.json is auto-detected, or you can register any folder yourself. Local components inject from their path alias (e.g. @/components/ui/button), are badged LOCAL, and re-index live as you edit them.
Does it add runtime dependencies to my project?
No. Snapds only reads metadata and writes the code and skill files you explicitly ask for — nothing is added to your bundle.
What about polymorphic or `as`-style components?
A TypeScript compiler pass enumerates exported value components that docgen alone misses. They appear as chips; add overrides to give them props.
Where are my package selections stored?
Per package under snapds.packages as excluded and manual lists. Snapds never persists a full allow-list, so new upstream components always surface.
Bring your design system into every file
Install Snapds, register a package, and start dropping production-ready components in minutes.