shadcn/ui

SVGL v5 support shadcn/ui registry 🎉, so you can easily add SVGs to your project using their CLI. Add the registry config once and you will be able to install any SVG in .tsx using npm, yarn, bun or pnpm.

Add registry (optional)

If you have already added shadcn/ui in your project, you can skip this step.

Add the SVGL registry to your components.json file:

{
  "registries": {
    "@svgl": "https://svgl.app/r/{name}.json"
  }
}

shadcn/ui Namespaces documentation.

Usage

Add SVGs using the shadcn/ui CLI:

npx shadcn@latest add @svgl/sanity
# or
pnpm dlx shadcn@latest add @svgl/sanity
# or
yarn dlx shadcn@latest add @svgl/sanity
# or
bunx shadcn@latest add @svgl/sanity

Add multiple SVGs at once:

pnpm dlx shadcn@latest add @svgl/sanity @svgl/github @svgl/supabase @svgl/vercel

MCP Server

You can use the shadcn MCP server to browse, search, and add React SVGs from SVGL registry:

Prerequisites

You need to have @svgl in your components.json file:

{
  "registries": {
    "@svgl": "https://svgl.app/r/{name}.json"
  }
}

Quick Start

With Claude Code:

pnpm dlx shadcn@latest mcp init --client claude

Then, restart Claude Code. You can use /mcp command in Claude Code to debug the MCP server.

With Cursor:

pnpm dlx shadcn@latest mcp init --client cursor

Then, open Cursor Settings and Enable the MCP server for shadcn.

With VSCode:

pnpm dlx shadcn@latest mcp init --client vscode

Then, open .vscode/mcp.json and click Start next to the shadcn server.

Example Prompts

Here are some example prompts you can use to add SVGs from SVGL registry:

Can you add the "GitHub" SVG from SVGL registry?

Please add React, Svelte and Vue SVGs from SVGL registry.