Installation

tweenly components install like any shadcn component. They drop into your project as source files you can read and edit.

With the shadcn CLI

Set up shadcn
Skip this if your project already has a components.json.
```
npx shadcn@latest init
```
Add a component
tweenly is listed in the shadcn registry directory, so the CLI knows the @tweenly namespace without any setup. Dependencies are installed for you.
```
npx shadcn@latest add @tweenly/fade-in
```
Add several at once by listing them:
```
npx shadcn@latest add @tweenly/fade-in @tweenly/marquee @tweenly/chart-line
```

Use it

import { FadeIn } from "@/components/fade-in"

export default function Page() {
  return (
    <FadeIn direction="up" blur={8}>
      <h1>Hello, world</h1>
    </FadeIn>
  )
}

With an AI agent

Claude Code, Cursor, VS Code and Codex can browse and install tweenly components through the shadcn MCP server. Ask in plain language, for example “add a tweenly text reveal to the hero”.

Register the namespace
Add @tweenly to components.json so the MCP server can search it alongside your other registries.
```
{
  "registries": {
    "@tweenly": "https://trytweenly.vercel.app/r/{name}.json"
  }
}
```

Connect your agent

Run the command for your client. It writes the MCP config into your project.

# Claude Code (.mcp.json)
npx shadcn@latest mcp init --client claude

# Cursor (.cursor/mcp.json)
npx shadcn@latest mcp init --client cursor

# VS Code with Copilot (.vscode/mcp.json)
npx shadcn@latest mcp init --client vscode

# Codex (prints the snippet for ~/.codex/config.toml)
npx shadcn@latest mcp init --client codex

Or add it by hand
Any MCP client works with the same server. For Claude Code, save this as .mcp.json in the project root, or run claude mcp add shadcn -- npx shadcn@latest mcp.
```
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}
```

Ask for a component

Restart the agent and check the server is connected (/mcp in Claude Code). Then try:

Show me all the button components in @tweenly
Add @tweenly/text-reveal to the hero and split it by word
Build a pricing section with @tweenly/number-ticker and @tweenly/fill-button

Agents without MCP can read the docs as plain text: point them at /llms.txt for the index or /llms-full.txt for every component's props and usage.

By URL

Every component is also a plain registry item you can install by URL, which works with any shadcn version.

npx shadcn@latest add https://trytweenly.vercel.app/r/fade-in.json

Manual

Install the component's dependencies, then copy the code from its Source tab into components/. Most components only need Motion. Fill Button and Sticky Cards use GSAP.

npm install motion

Components import cn from @/lib/utils, which shadcn projects already include.

Reduced motion

Every component checks prefers-reduced-motion. When it is set, movement, blur and scale are removed and only a short opacity fade (or the final state) remains. You don't need to do anything extra.

Installation

With the shadcn CLI

Set up shadcn

Add a component