Skip to content

shadcn.io is an independent project built on shadcn/ui

MCP

get_block

Fetch one shadcn block in a single call: its category, the targets it comes in and what it uses. Add the install command and its FAQ in the same response.

Group
Blocks
Inputs
base?framework?have?include?name?names?packageManager?uiAlias?
Access
Read-only

When to use it

Inputs

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

React only. Default base (Base UI).

Type
"base" | "aria" | "ark" | "radix"
framework?"react" | "vue" | "svelte" | "solid"

Default react.

Type
"react" | "vue" | "svelte" | "solid"
have?string[]

What the ui folder already has: left out.

include?("faq" | "install" | "preview" | "related" | "source")[]

install (command, or files for Vue/Svelte/Solid), faq, preview (links), related, source (code).

Type
("faq" | "install" | "preview" | "related" | "source")[]
name?string

Or names for several.

names?string[]

Several at once, in place of name: one install.

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

From the lockfile. Default npm.

Type
"npm" | "pnpm" | "yarn" | "bun"
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 the pricing block with a billing toggle
use shadcnio to add a kanban board block for Svelte

Call and response

Asked “Add the pricing block with the billing toggle to my landing page”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call
get_block({ include: ["install", "faq"], name: "pricing-billing-toggle" })
Response
{
  "category": "pricing",
  "categoryTitle": "Pricing",
  "comesIn": [
    "react/base",
    "react/aria",
    "… 5 more"
  ],
  "description": "Three plan cards under a monthly and yearly switch that wears its saving in the header row, with prices that roll to their new amount and ea…",
  "faq": [
    {
      "answer": "Edit the `PLANS` array at the top of the file. Each plan has its `name`, `icon` (a Lucide icon), `description`, `monthly` price, `yearly` pr…",
      "question": "How do I change the plans, prices and the saving?"
    },
    {
      "answer": "Each call to action is a real link to its plan's `href`. It's a `ShineButton` with `render` set to an `a` element and `nativeButton={false}`…",
      "question": "How do I connect the plan buttons to checkout?"
    },
    "… 5 more"
  ],
  "group": "Billing switches",
  "install": {
    "command": "npx shadcn@latest add \"https://www.shadcn.io/r/pricing-billing-toggle.json?token=YOUR_TOKEN\" --overwrite"
  },
  "name": "pricing-billing-toggle",
  "packages": [
    "lucide-react"
  ],
  "pro": true,
  "slug": "pricing-billing-toggle",
  "target": "React · Base UI",
  "title": "Billing Toggle Pricing",
  "uses": [
    "badge",
    "button",
    "… 5 more"
  ]
}

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
Sign in to get your config
Sign in with a Pro account, and this holds your MCP URL, ready to paste.
GoogleGitHub
Use email insteadPart of Pro

What your agent reads

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

tools/listget_block.description
A block in one call: what it is, the targets it comes in, what it uses. include adds install (one CLI command), faq, preview, related or source; names for several, with one install.

Next

FAQ

How does a block install?

install is one CLI command with your token (React and Solid: shadcn; Vue: shadcn-vue; Svelte: shadcn-svelte). A port's CLI needs get_project_setup once first. With no shell, source returns the files' code to write by hand.

Can I add several blocks at once?

Pass names (up to 10): each block's answer and, with include: ["install"], one command for all. have leaves out the components the project already has.

Will a block match my theme?

Blocks style with the project's own theme tokens, so they follow its colors, radius and dark mode. Nothing in a block fixes a color.

Where can I see a block before adding it?

preview has the block's page, the full-screen viewer and its gallery. faq answers the questions on its page for your framework and base, and related names its neighbours.