Skip to content

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

MCP

search_blocks

Find a shadcn block by what it does, such as a pricing section with a yearly toggle. Hits name the category and group, and get_block adds one.

Group
Blocks
Inputs
querybase?category?framework?limit?
Access
Read-only

When to use it

  • The user wants a whole section or screen ("a pricing page", "a chat window", "a settings screen").
  • Before building a section from components: a block may already be it.

Inputs

InputType
querystring

What it does: "pricing page with a yearly toggle".

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

React only. Default base (Base UI).

Type
"base" | "aria" | "ark" | "radix"
category?string

Only this category.

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

Default react.

Type
"react" | "vue" | "svelte" | "solid"
limit?number

Example prompts

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

Prompts
use shadcnio to find a pricing section with a monthly and yearly toggle
use shadcnio: is there a kanban board block for Vue?
use shadcnio to find a login screen with social buttons

Call and response

Asked “I need a pricing section with a monthly and yearly toggle”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call
search_blocks({ query: "pricing page with a monthly yearly toggle" })
Response
{
  "categories": [
    "pricing"
  ],
  "count": 10,
  "next": "get_block({ name: \"<slug>\", include: [\"install\"] }) adds one; list_blocks({ category }) shows the rest of a category.",
  "query": "pricing page with a monthly yearly toggle",
  "results": [
    {
      "category": "pricing",
      "group": "Billing switches",
      "line": "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…",
      "slug": "pricing-billing-toggle",
      "title": "Billing Toggle Pricing",
      "url": "https://kit.dev/blocks/pricing-billing-toggle"
    },
    {
      "category": "pricing",
      "group": "Plan rows",
      "line": "Three plan rows for an email API, each its own band with its price and call to action in view, opening in place to list its features, with a…",
      "slug": "pricing-accordion-plans",
      "title": "Accordion Plans Pricing",
      "url": "https://kit.dev/blocks/pricing-accordion-plans"
    },
    "… 8 more"
  ],
  "target": "React · Base UI",
  "total": 112
}

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 search_blocks, one of the Blocks tools. Your agent reads it to decide when to call the tool:

tools/listsearch_blocks.description
Find blocks (whole sections and app screens) by what they do ("pricing with a yearly toggle", "kanban board"): slug, title, category and a line, best first. Then get_block adds one.

Next

FAQ

What is a block, and how is it different from a component?

A component is one piece (a button, a dialog). A block is a finished section or screen built from components: a pricing table, a kanban board, a settings page. Search a component for a piece, a block for a whole area of a page.

Which frameworks do blocks come in?

Every block comes on all seven targets: React on Base UI, Ark UI, Radix or React Aria, plus Vue, Svelte and Solid. Pass framework and base so the links and the install match your project.

Are blocks free?

Blocks are part of Pro, and so is the MCP: your connection's token is already in the install a block gives you.

How do I narrow a search to one kind of block?

The categories line names the categories the query matched (pricing, hero…); category limits the search to one. total counts every match, and limit caps what is returned.