shadcn.io is not affiliated with official shadcn/ui

MCP

get_component

Q: How do I get the install command and a demo in one call?

install: the CLI command (React and Solid: shadcn; Vue: shadcn-vue; Svelte: shadcn-svelte), with for a port setup, its CLI's setup once per project; get_install_plan has the files without a CLI. usage: the docs' usage snippet, with usageNeeds naming any component it imports that the install doesn't bring. api: an outline of every part's props (or one part in full, with part). demo: a demo's code (the first, or demo). preview: each demo's link in the viewer. source: its own files, to read or adapt.

Q: Why ask for include instead of calling each tool?

One call in place of four: what used to be get_component, get_install_command, get_component_docs and get_demo. Without include, it stays a few hundred tokens.

Q: Can I fetch several components at once?

Pass names: each component's answer, and with include: ["install"] one command (or one plan) for them all. have leaves out what the project already has.

Fetch one shadcn component in a single call: what it is, its parts, and its demos. Ask for the install and a usage snippet in the same response.

Group: Inspect
Inputs: base?demo?framework?have?include?name?names?packageManager?part?uiAlias?
Access: Read-only

When to use it

To add a component: its install, usage and a demo in one call.
To build a page from several (names): one install for all, and each one's usage.
Right after a search, to check a component fits.

Inputs

InputType

base?"base" | "aria" | "ark" | "radix"

React only. Default base (Base UI).

Type: "base" | "aria" | "ark" | "radix"

demo?string

For "demo": its slug. Default the first.

framework?"react" | "vue" | "svelte" | "solid"

Default react.

Type: "react" | "vue" | "svelte" | "solid"

have?string[]

What the ui folder already has: left out.

install (command, or files for Vue/Svelte/Solid), usage, api (outline), demo (code), preview (links), source.

Type: ("install" | "usage" | "api" | "demo" | "preview" | "source")[]

name?string

Or names for several.

names?string[]

Several at once, in place of name.

packageManager?"npm" | "pnpm" | "yarn" | "bun"

From the lockfile. Default npm.

Type: "npm" | "pnpm" | "yarn" | "bun"

part?string

For include "api": one part only.

uiAlias?string

components.json's aliases.ui (#lib/components/ui): demo imports point there.

Example prompts

Name the server, so the agent doesn't answer from memory:

Prompts

use shadcnio to add a dialog to this page

use shadcnio to build the settings page with tabs, a switch and a select

Call and response

Asked “Add a dialog to this page”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call

get_component({ include: ["install", "usage"], name: "dialog" })

Response

{
  "category": "Overlays",
  "demos": [
    "default",
    "close-button",
    "… 5 more"
  ],
  "dependencies": [
    "@base-ui/react",
    "tailwind-variants",
    "… 1 more"
  ],
  "description": "A modal window that appears on top of the main content.",
  "kind": "component",
  "name": "dialog",
  "parts": [
    "content",
    "title",
    "… 3 more"
  ],
  "setup": [
    "Always give it a title (its Title part): screen readers announce it. Hide it with sr-only if the design has none."
  ],
  "target": "React · Base UI",
  "title": "Dialog",
  "urls": {
    "docs": "https://kit.dev/ui/dialog",
    "image": "https://kit.dev/og/docs/dialog.png",
    "viewer": "https://kit.dev/view/ui/dialog/default"
  },
  "uses": [
    "preview-frame",
    "button"
  ],
  "usage": "```tsx\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFoot…",
  "install": {
    "command": "npx shadcn@latest add \"https://kit.dev/r/dialog.json?token=YOUR_TOKEN\" --overwrite",
    "next": "It never stops to ask: a file of the same name that differs is replaced (one the same is left alone). Pass have with what the ui folder alre…"
  }
}

Call it by hand

Your MCP client sends this for you. To try the tool without one, post the call yourself; the server answers in server-sent events, the result on the data: line.

Terminal

Google GitHub

Use email insteadPart of Pro

What your agent reads

The server's description of get_component, one of the Inspect tools. Your agent reads it to decide when to call the tool:

tools/listget_component.description

A component in one call: what it is, its parts, demos, packages, setup. include adds install, usage, api, demo, preview or source; names for several, with one install. A part that doesn't fit one answer is named in more, as its call.

FAQ

How do I get the install command and a demo in one call?

install: the CLI command (React and Solid: shadcn; Vue: shadcn-vue; Svelte: shadcn-svelte), with for a port setup, its CLI's setup once per project; get_install_plan has the files without a CLI. usage: the docs' usage snippet, with usageNeeds naming any component it imports that the install doesn't bring. api: an outline of every part's props (or one part in full, with part). demo: a demo's code (the first, or demo). preview: each demo's link in the viewer. source: its own files, to read or adapt.

Why ask for include instead of calling each tool?

One call in place of four: what used to be get_component, get_install_command, get_component_docs and get_demo. Without include, it stays a few hundred tokens.

Can I fetch several components at once?

Pass names: each component's answer, and with include: ["install"] one command (or one plan) for them all. have leaves out what the project already has.