Your AI editor just learned shadcn/ui.

list_componentsBy category

The catalog, by category

› Show me every overlay for Solid.
list_components({ category: "Overlays", framework: "solid" })

{
  "target": "Solid · Ark UI",
  "categories": [{ "category": "Overlays", … }],
  "count": 11,
  "next": "detail: true, or get_component, says what…"
}

search_componentsRanked, with aliases

Ranked search with aliases

› I need a modal for my React Aria app.
search_components({ base: "aria", limit: 3, query: "modal" })

{
  "target": "React · React Aria",
  "count": 3,
  "query": "modal",
  "results": [{ "name": "dialog", … }, …]
}

search_demosAcross every demo

Find the demo of a pattern, across every component

› Is there a demo of a date range picker I can start from?
search_demos({ query: "date range" })

{
  "target": "React · Base UI",
  "count": 10,
  "next": "get_demo({ name: \"date-input\", demo: \"…",
  "query": "date range",
  "results": [{ "name": "date-input", … }, …]
}

get_componentInclude what you need

A component, and what you need of it, in one call

› Add a dialog to this page.
get_component({ include: ["install", "usage"], name: "dialog" })

{
  "name": "dialog",
  "title": "Dialog",
  "category": "Overlays",
  "target": "React · Base UI",
  "demos": ["default", …],
  "dependencies": ["@base-ui/react", …],
  "description": "A modal window that appears on top…",
  …

get_component_apiProps · Attributes · Keys

Props, data attributes, CSS variables, keyboard

› What props does the Dialog's content take?
get_component_api({ name: "dialog", part: "Content" })

{
  "name": "dialog",
  "target": "React · Base UI",
  "parts": [{ "part": "DialogContent", … }]
}

get_component_docsMarkdown

The docs page as Markdown, by section

› How do I use the Combobox in Svelte?
get_component_docs({ framework: "svelte", name: "combobox", sections: ["Usage"] })

---
title: Combobox
description: "Displays a searchable list of options."
category: Selection
---

## Usage

  …

get_guideForms · Theming · RTL

Forms, theming, colors and RTL, as Markdown

› How do I validate this form with React Hook Form?
get_guide({ sections: ["Validation"], topic: "react-hook-form" })

---
title: React Hook Form
description: "Build forms in React using React Hook Form and Zod."
---

## Validation

### Client-side
  …

get_demoReady to paste

A demo's code, ready to paste

› Give me the Calendar's range demo for Vue.
get_demo({ demo: "range", framework: "vue", name: "calendar" })

{
  "name": "calendar",
  "title": "Range",
  "target": "Vue · Ark UI",
  "code": "<script setup lang=\"ts\">\nimport { shal…",
  "demo": "range",
  "file": "calendar/example-range.vue",
  "language": "vue",
  …

get_install_commandToken-embedded

The shadcn CLI command, token included

› Install the Color Picker.
get_install_command({ name: "color-picker", packageManager: "pnpm" })

{
  "name": "color-picker",
  "target": "React · Base UI",
  "command": "pnpm dlx shadcn@latest add \"https://k…",
  "next": "Adds it to the project's ui folder, with …"
}

get_install_planVue · Svelte · Solid

Every file and package an install needs

› Add the Dialog to my Vue project.
get_install_plan({ framework: "vue", name: "dialog" })

{
  "name": "dialog",
  "target": "Vue · Ark UI",
  "cssVars": { "dark": {…}, "light": {…} },
  "files": [{ "target": "lib/utils.ts", … }, …],
  "install": "npm install @ark-ui/vue @lucide/vue cn…",
  "items": ["utils", …],
  "next": "1 more file (pending): get_install_plan({…",
  …

get_project_setupPreset · Theme · Aliases

Init a project: preset, theme, aliases

› Set up a new Vite app with shadcn.io.
get_project_setup({ framework: "react", stack: "vite" })

{
  "target": "React · Base UI",
  "guide": "## Use the shadcn.io Preset\n\n### Creat…",
  "init": "npx shadcn@latest init \"https://kit.dev/…",
  "next": "Then get_install_command (or get_componen…",
  "registry": { "componentsJson": {…}, … },
  "stack": "Vite"
}

list_icon_libraries222 libraries

Every icon library, most used first

› Which icon sets do you have?
list_icon_libraries({ limit: 3, query: "material" })

{
  "count": 8,
  "libraries": [{ "name": "Material Symbols", … }, …]
}

search_icons294k icons

Search 294k icons across 222 libraries

› Find icons for the sidebar: home, settings and logout.
search_icons({ library: "lucide", queries: ["home", "settings", "logout"] })

{
  "count": 7,
  "next": "get_icon with names (one set) gives one i…",
  "results": [{ "names": ["house", …], … }, …]
}

get_iconImport or component

The import, or a component, for any framework

› Add the sidebar's icons.
get_icon({ library: "lucide", names: ["house", "settings", "log-out"] })

{
  "library": "lucide",
  "import": "import { HouseIcon, SettingsIcon, LogOu…",
  "package": "lucide-react",
  "framework": "react",
  "icons": [{ "name": "house", … }, …]
}

search_designs500 brands

500 brands' design systems, by name, product or color

› Find me a design system like Stripe's to base our app on.
search_designs({ limit: 5, query: "fintech" })

{
  "count": 5,
  "next": "get_design({ name: \"stripe\" }) returns …",
  "query": "fintech",
  "results": [{ "name": "Stripe", … }, …]
}

get_designDESIGN.md

A brand's DESIGN.md, whole or by section

› Make this app look like Linear.
get_design({ name: "linear", sections: ["tokens"] })

{
  "name": "Linear",
  "slug": "linear",
  "categories": ["Project Management", …],
  "description": "A near-black product-focused marke…",
  "download": "https://kit.dev/design/linear/raw",
  "file": "DESIGN.md",
  "sections": ["tokens", …],
  …

search_templatesCode · Live demo

Templates to start from, by what the app is

› Is there a template I can start my SaaS dashboard from?
search_templates({ limit: 3, query: "saas dashboard" })

{
  "count": 3,
  "next": "Start from one: clone its github (premium…",
  "query": "saas dashboard",
  "results": [{ "name": "Prodexa — Productivit…", … }, …]
}

whoamiAccount · Limits

Who's connected, and the rate limit

› Is my MCP connection working?
whoami()

{
  "email": "you@example.com",
  "plan": "Pro",
  "rateLimit": { "limit": 600, "remaining": 598, … }
}