Frameworks and bases

Every component comes for seven targets: React on four sets of primitives, and Vue, Svelte and Solid on Ark UI. Your agent passes its target to every component tool, as framework and, for React, base. The docs, demos, source and install it gets back are that target's.

The targets

React on Ark UI has every component, utility and hook. The other React bases miss a few, and Vue, Svelte and Solid have all but a few React-only ones: list_components lists them per target.

How your agent picks

When it connects, the server tells your agent to read your package.json before calling anything, and to use what's there:

So components land on the primitives your app already ships, and you don't end up with a second library for the same job.

A chat app that can't see your project (Claude Desktop, ChatGPT, Perplexity) has nothing to read: say it in the prompt.

When a component isn't on your base

The tools fall back to a base it does come in, and the response says which in its note. search_components marks a result that isn't on your target (available: false) and lists the targets it comesIn.

Setting up a project

A project without shadcn.io yet starts with get_project_setup, once:

• React: the shadcn CLI's init with the shadcn.io preset, your token in its URL. It writes components.json, the cn helper and the theme. Pass your stack (Next.js, Vite, TanStack Start, React Router, Astro, Laravel) for its guide, for a new app or an existing one (existing: true).
• Vue, Svelte and Solid: the packages to install, src/lib/utils.ts, the @/ alias for your bundler and the theme's CSS for your global stylesheet.

Installing

React: the shadcn CLI

get_install_command returns the command, for your package manager, with your token in its URL:

bunx --bun shadcn@latest add "https://kit.dev/r/tabs.json?token=YOUR_TOKEN"

Each base has its own path: /r/tabs.json for Base UI, /r/ark/tabs.json, /r/radix/tabs.json and /r/aria/tabs.json. The CLI brings the components and utilities it uses too, and writes the files where your components.json aliases say.

Several components at once? names makes it one command, each URL with your token. packageManager matches your lockfile (pnpm dlx, bunx --bun…).

Vue, Svelte and Solid: file by file

There's no CLI for them. get_install_plan returns everything one install writes, the way the CLI would:

• every file, the component and each one it uses, with its path and code;
• the npm packages to add, for your package manager;
• any CSS variables, and the steps in order.

Pass names for several (a file two of them share comes once), and have with what's already in components/ui: those files, and what they bring, are left out. Your agent writes the files and installs the packages. Files import each other through @/components/ui, @/lib and @/hooks; a file marked optional, like lib/utils.ts, is one your project likely has already.

For React, the same plan is there when your agent can't run commands, or when you'd rather see what an install writes first.

Docs and demos for your target

get_component_docs reads the target's own page (/ui/tabs, /ui/radix/tabs, /ui/vue/tabs), and get_demo its demo code, with imports pointing at your components. get_component with include: ["preview"] gives the links to see it. A Svelte demo's nested components live in their own files: get_demo returns them in files, to write beside the demo.

FAQ