shadcn.io is not affiliated with official shadcn/ui

MCP

get_component_api

Q: When should I use this instead of the docs page?

The same reference, as data: no Markdown to parse, and part or prop narrow it to what you need. A part's props are a few hundred tokens; the docs' whole API section can be a few thousand.

Q: Does the API differ for Vue, Svelte, and Solid?

Each port's own: Vue's callbacks are events (@value-change), Svelte's render props are snippets, Solid's take functions. The props are Ark UI's, as the ports are.

Q: Where do the keyboard interactions come from?

With the whole reference (no part or prop), from the docs' Accessibility section: which key does what.

Read one part of a component's API: its props, which are required, and the keys. Ask for a single prop when you don't need the whole page.

Group: Inspect
Inputs: namebase?detail?framework?part?prop?
Access: Read-only

When to use it

Before using a part: its props, their types and defaults.
To style or test a part: its data attributes and CSS variables.

Inputs

InputType

namestring

As in its URL: date-picker.

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

React only. Default base (Base UI).

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

detail?boolean

Every part in full (long).

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

Default react.

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

part?string

One part, in full: Content, Root.

prop?string

One prop, data attribute or CSS variable: open.

Example prompts

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

Prompts

use shadcnio to tell me the props of the Dialog's content

use shadcnio: which parts of the Select take disabled?

Call and response

Asked “What props does the Dialog's content take?”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call

get_component_api({ name: "dialog", part: "Content" })

Response

{
  "parts": [
    {
      "part": "DialogContent",
      "dataSlot": "dialog-content",
      "props": [
        {
          "name": "bottomStickOnMobile",
          "type": "boolean",
          "default": "true",
          "description": "Stick the dialog to the bottom of the screen on mobile."
        },
        {
          "name": "positionerClassName",
          "type": "string",
          "description": "Class names on the positioner (the viewport-fixed wrapper)."
        },
        "… 4 more"
      ]
    }
  ],
  "name": "dialog",
  "target": "React · Base UI"
}

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

tools/listget_component_api.description

A component's API: an outline by default (each part's prop names, * required, and the keys). part or prop for types, defaults and descriptions; detail for all of it.

FAQ

Why is the API an outline unless I ask for a part?

A component's whole reference can be thousands of tokens (Vue's Select is about 7,000). The outline is a few hundred: every part and the names it takes. Then part reads one part in full.

When should I use this instead of the docs page?

The same reference, as data: no Markdown to parse, and part or prop narrow it to what you need. A part's props are a few hundred tokens; the docs' whole API section can be a few thousand.

Does the API differ for Vue, Svelte, and Solid?

Each port's own: Vue's callbacks are events (@value-change), Svelte's render props are snippets, Solid's take functions. The props are Ark UI's, as the ports are.

Where do the keyboard interactions come from?

With the whole reference (no part or prop), from the docs' Accessibility section: which key does what.