devsnips
Search docs, APIs, guides…

tutorials

Getting started with DevSnips

src/data/devsnips/docs/tutorials/getting-started.md

The fastest path from "I need a UI" to "it's in my project." DevSnips has three consumption paths — pick the one that matches how you work. All three resolve against the same registry.

Pick your path

Path Best for Entry point
CLI Copying source into your project npx devsnips add <path>
MCP server Letting an AI coding agent find/read resources inside your editor pip install devsnips-mcp
Browse / copy Exploring visually first library/ on disk

This tutorial uses the CLI, the most common path.

1. Find a resource

Resources are addressed by a tech-first registry path:

<Technology>/<Category>/<Family>/<variant>/[style]
  • Technology: React, Tailwind, Vanilla
  • Category: Components, Sections, Templates
  • e.g. React/Components/Buttons/solid-button

To see what's available without the CLI, browse the registry. Query options: Machine-readable overview.

2. Install it

From your project root (Node.js 18+ required):

npx devsnips add React/Components/Buttons/solid-button

The CLI resolves the path against the published registry, downloads the source files, and writes them under ./devsnips/:

./devsnips/react/components/buttons/solid-button/

The technology segment is stripped from the input and re-introduced as the lowercase tech slug; the remaining segments are lowercased. See CLI — path handling.

The first install also creates the project context:

./devsnips/
├── AGENTS.md
├── config.json
└── react/components/buttons/solid-button/…

3. Use it

Open the installed files and copy the markup into your app. The CLI never installs metadata.json or preview.html; it installs the source (code.*, pages/*, *.css, *.js) plus README.md/AGENTS.md when present.

npx devsnips --help
npx devsnips init

4. Verify what is installed

devsnips/config.json records every install ({ path, technology, installedAt }). Do not edit it by hand. To remove a resource, delete its files and its config.json entry.

Common next steps

Go deeper

Getting started with DevSnips as Markdown