Install UI components with the shadcn CLI and an MCP server

• A React 19 project with Tailwind CSS v4 (Next.js App Router and Vite both work).
• A components.json from npx shadcn@latest init (shadcn CLI 4 or later, which reads namespaced registries with headers).
• A mebius.design account and a personal access token from Settings › Tokens. The free charts and forms need only the account; a kit’s code needs that kit.

Add the @mebius namespace to components.json. The CLI replaces {name} with the item and reads the token from your environment:

{
  "registries": {
    "@mebius": {
      "url": "https://www.mebius.design/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${MEBIUS_TOKEN}"
      }
    }
  }
}

MEBIUS_TOKEN=mbs_your_token

Keep the token out of git

The CLI reads .env.local and .env. Check that .env.local is in your .gitignore, and revoke a token in Settings › Tokens if it leaks.

Each kit has a theme item with its tokens. Install it on its own first, then any item with --overwrite so shared parts update to the kit’s version. Item names start with their kit:

# a free chart
npx shadcn@latest add @mebius/charts-theme
npx shadcn@latest add @mebius/charts-revenue-growth --overwrite

# a block from a kit you own
npx shadcn@latest add @mebius/relivo-theme
npx shadcn@latest add @mebius/relivo-metrics-dashboard --overwrite

Every free item’s page shows its exact command, for example the Revenue Growth Chart.

• No mebius token was sent: MEBIUS_TOKEN isn’t set where the CLI runs, or the registry URL redirects. Use the exact https://www URL above.
• The token is invalid or has been revoked: create a new one and replace the line in .env.local.
• Your account doesn’t own this kit: the item belongs to a paid kit. Buy the kit, or All items, and run the command again.
• There is no item with that name: item names start with their kit, like @mebius/charts-ethereum.

Add the server to your editor. Claude Code:

claude mcp add --transport http mebius https://www.mebius.design/api/mcp --header "Authorization: Bearer <your token>"

Cursor and VS Code read a JSON file in the project:

{
  "mcpServers": {
    "mebius": {
      "url": "https://www.mebius.design/api/mcp",
      "headers": { "Authorization": "Bearer <your token>" }
    }
  }
}

{
  "servers": {
    "mebius": {
      "type": "http",
      "url": "https://www.mebius.design/api/mcp",
      "headers": { "Authorization": "Bearer <your token>" }
    }
  }
}

Replace <your token> with a token from Settings › Tokens, which also shows the current setup for each editor. The server’s tools are list_kits, list_items, search_items, get_item (full source and usage docs) and get_install_instructions, so a prompt like “add the mebius candlestick chart to the dashboard” ends in the same CLI commands as above.

shadcn’s own server browses and installs from every registry in components.json, the @mebius one included once it is set up as above. Set it up with npx shadcn@latest mcp init --client claude (or --client cursor); see shadcn’s MCP docs. It sees what the registry lists; the mebius server adds the usage docs and Figma references of each item.