MCP

Tween UI is a shadcn registry, so it works with the shadcn MCP server as it is. There is no separate Tween UI server to install: once @tween-ui is in your project's components.json, an assistant like Claude Code, Cursor or VS Code can browse the catalog, read what a component does and install it by name — the same files the CLI would give you, in the same place.

Requirements#

An existing shadcn project, the same as for a normal install — see the Setup Guide if you don't have one yet.

The registry has to be in components.json before you use the MCP server. The CLI writes it for you on the first install, but the MCP server only searches the registries that are already listed there, so on a fresh project it would not see Tween UI at all. Add it up front:

pnpm dlx shadcn@latest registry add "@tween-ui=https://tween-ui.vercel.app/r/{name}.json"

Or paste it in by hand:

{
  "registries": {
    "@tween-ui": "https://tween-ui.vercel.app/r/{name}.json"
  }
}

Set up your editor#

From your project root, run the command for your editor. It writes the MCP config file for you:

Then restart the editor, or reload its MCP servers, so it picks up the new config. Some editors list a new server as off until you switch it on.

To write the config yourself instead, this is what the command adds for Claude Code and Cursor:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Commit the config file together with components.json, so everyone on the team gets the same setup.

Try it#

Ask for what you want in plain words. The assistant searches the catalog, reads the match and runs the install:

• "Show me the Tween UI blocks for testimonials."
• "Add the Tween UI pricing plan switch to the pricing page."
• "Find a Tween UI logo strip that scrolls on its own and install it."
• "Which Tween UI components need GSAP?"

Installed items land in components/tweenui/, and dependencies like gsap and @gsap/react are installed with them — exactly as with shadcn add @tween-ui/<name>.

What the assistant can do#

The shadcn MCP server gives the assistant these tools, and each one works on Tween UI once the registry is listed:

Search matches words in each item's name, title and description, so describing the section you want — "a testimonial section that scrolls sideways" — tends to find more than guessing at a component name.

Every component and block has a matching <name>-demo example with the same code as the Usage section of its page, so the assistant can pass real props instead of guessing them. After an install, the CLI also prints a short note: a link to the item's page, which GSAP plugins it registers for itself, and anything else worth knowing before you ship it.

Troubleshooting#