Shadcn UI Kit MCP Server

Bring Shadcn UI Kit into Your AI Editor

Connect Claude Code, Cursor or any MCP client to the kit. Ask for a hero section, a SaaS landing page or a CRM dashboard, and your assistant builds it from our blocks, components and dashboards instead of generating UI from scratch.

Get your API keySee how to connect

Included in the Pro, Team and Enterprise plans.

MCP Server
Landing page

Your editor pulls real kit code through the MCP server and builds what you asked for.

In action

Watch your assistant build with the kit

Sections, full pages and dashboards come from real kit code and adapt to your project. Pick a scenario to replay it.

~/my-app

>

Setup

Connect in a minute

Create an API key in your account, then add the server to your editor. Replace YOUR_API_KEY with your key.

Run in your terminal
claude mcp add --transport http shadcnuikit https://shadcnuikit.com/api/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"
Create an API key
How it works

From a prompt to kit code in three steps

A one-time setup, then you build by describing what you need.

  1. Create an API key

    Open your account and create a key. It is the same key the shadcn CLI uses.

  2. Connect your editor

    Add the server to Claude Code, Cursor, VS Code or any other MCP client.

  3. Ask for what you need

    Describe the section, page or dashboard. Your assistant builds it from the kit.

Prompts

Prompts to try

Say what you want and where it should go. Mentioning shadcnuikit tells your assistant to use the kit.

  • Section

    Add a pricing section with a monthly and yearly toggle from shadcnuikit.

  • Landing page

    Use shadcnuikit to build a landing page for a fitness coaching app.

  • SaaS page

    Build a SaaS landing page for an invoicing tool with shadcnuikit blocks.

  • Online store

    Build a product page with shadcnuikit: details, reviews and related products.

  • Dashboard

    Add the e-commerce dashboard from shadcnuikit and adapt it to our store.

  • Dashboard shell

    Set up the shadcnuikit dashboard shell with a sidebar for Orders, Customers and Reports.

  • App page

    Add a kanban board page from shadcnuikit under /dashboard/tasks.

  • Inner page

    Add a settings page from shadcnuikit with profile, billing and notification tabs.

  • Auth

    Create the login and register pages from the shadcnuikit auth screens.

  • Charts

    Add a revenue chart and four stat cards from shadcnuikit to the overview page.

  • Data table

    Replace this table with a data table from shadcnuikit that has filters.

  • Form

    Use a shadcnuikit file upload component in the profile form.

  • Component

    Swap our accordion for a shadcnuikit variant with the icon on the left.

  • Browse

    List the hero section variants in shadcnuikit so I can pick one.

  • Redesign

    Rebuild our footer with a shadcnuikit footer block and keep the same links.

FAQ

Frequently asked questions

The MCP server is included in the Pro, Team and Enterprise plans. It uses the API key from your account, the same one the shadcn CLI uses, so there is nothing extra to buy.

Any client that supports remote MCP servers over HTTP, including Claude Code, Cursor and VS Code. Installing a dashboard runs a shadcn CLI command, so that part needs an assistant that can use your terminal.

No. The server only answers catalog requests such as a search term or an item name. Your assistant edits your files locally, and nothing from your project is sent to us.

No. Blocks use the shadcn/ui components your project already has, and only the missing ones are added. When your shadcn/ui style differs from the kit, the assistant adjusts the block instead of replacing your components.

The shadcn MCP server installs registry items one by one, and our registry still works with it. This server knows the whole kit: it plans full pages, installs complete dashboards with their shell and theme, and accounts for the differences between shadcn/ui styles.

Blocks and components are React, Tailwind CSS v4 and shadcn/ui, written for Next.js and easy to adapt to other React setups. Dashboards are built for the Next.js App Router.

Get Lifetime Access Now

Unlock lifetime access today and become part of the growing shadcn ecosystem, empowering you to build your projects faster and more efficiently. Keep this continuously updated and ever-expanding collection at your fingertips, and stay ahead with the latest components, templates, and improvements.

Get All Access