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

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