Tween UITween UI
7

Installation

Setup Guide

Install any Tween UI component by name through the @tween-ui registry.

Tween UI ships through the shadcn CLI. @tween-ui is listed in the shadcn registry directory, so the CLI already knows where it lives: every component and block installs by name, with no setup.

Requirements

An existing shadcn project — one with a components.json at its root. If you don't have one yet:

pnpm dlx shadcn@latest init

Tween UI components target React 19 and Tailwind CSS v4. Components that animate with GSAP pull in gsap and @gsap/react when you install them; the CLI handles that.

Install a component

pnpm dlx shadcn@latest add @tween-ui/icon-trail-button

Several at a time works as well:

pnpm dlx shadcn@latest add @tween-ui/glow-button @tween-ui/flip-card

Each component lands as a single file in components/tweenui/, and from then on it is yours to edit.

Add the registry (optional)

On the first install the CLI writes the namespace into your components.json for you:

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

To add it up front instead — say, to commit it before anyone on the team installs anything — run:

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

Or paste the block above in by hand. Either way it belongs in version control, so the rest of your team resolves @tween-ui the same way.

Without the registry

Every item is also reachable by URL:

pnpm dlx shadcn@latest add https://tween-ui.vercel.app/r/icon-trail-button.json

Useful for a one-off, or for a project you'd rather not add a registry to.

Troubleshooting

Unknown registry "@tween-ui" — check you have not typed @tweenui: the namespace has a hyphen. If the spelling is right, the CLI could not reach the shadcn registry directory; add the mapping above and it resolves without it.

registry add is not a command — you are on an older CLI. It arrived in shadcn v4; shadcn@latest picks it up, or add the registries block by hand.