Shadcn MCP for Cline

One MCP URL gives Cline live tools to search, preview, and install every block, component, and icon on shadcn.io — no hallucinated props, no broken installs.

Install

In Cline, click the hamburger menu icon to open the MCP Servers section, switch to the Remote Servers tab, click Edit Configuration, and add the shadcnio server:

Paste it in once signed in with an active Pro subscription — the config carries your personal token, so treat the full URL like an API key. Pro starts at $19/mo and includes MCP access across every editor plus 6,000+ production-ready blocks. Not Pro yet? See what you unlock →

Cline uses "type": "streamableHttp" (note the camelCase — different from Kilo Code's "streamable-http" with a hyphen). Drop the type field or use the wrong casing and Cline silently falls back to trying STDIO, which fails against an HTTPS URL.

Share with your team

Cline's MCP config lives in the VS Code extension's storage rather than a committed file, so there's no direct repo-share pattern. For teams, share the shape above and let each member paste in their own token from /dashboard/account after installing the Cline extension.

A Team or Organization plan gives every workspace member their own Pro entitlement.

Install your first block

use shadcnio to install hero-announcement into my project

What Cline actually does, in order:

1. search_items({ query: "hero-announcement" }) to confirm the slug resolves.
2. get_item({ name: "hero-announcement" }) for a cheap metadata peek.
3. get_install_command({ name: "hero-announcement" }) — returns a shadcn add https://www.shadcn.io/r/hero-announcement.json?token=… URL with your token already in the query string.
4. Runs it via Cline's execute_command tool (you approve the command, Cline runs it in the terminal). Files land under components/ui/.

Name the server explicitly ("use shadcnio…") when multiple MCPs are connected, or Cline picks one at random or skips tools entirely.

The example above uses hero-announcement, a Pro block — the install runs once you're signed in with an active subscription.

Manage the connection

Open the MCP Servers section (hamburger menu) to see every configured server with its live status. Each server page lets you toggle individual tools, restart, or delete. Cline auto-reconnects on config save, so edits in Edit Configuration take effect without restarting VS Code.

If your Pro subscription lapses, the next tool call returns 403 and Cline surfaces a red status on the server. Resubscribing restores access on the following request — no reconfigure, no reinstall. The token itself stays valid across subscription gaps.

FAQ