UI Beats

Supercharge your UI.

Beautifully designed, animated React components you can copy, paste, or install with the shadcn CLI.

Documentation · Components · Blog

---

What this is

UI Beats is a collection of animated React components built with TypeScript, Tailwind CSS and Motion.

It is not a package you install and import from. You own the code: add a component, then change whatever you like. No version pinning, no wrapper APIs, no waiting on a maintainer to expose a prop.

Install a component

npx shadcn@latest add https://uibeats.com/r/flip-card.json

The CLI writes the component into your project and installs the npm packages it needs. Every component page lists its own command, and the full index lives at /r/registry.json.

Prefer to copy and paste? Every component page has the full source under Installation → Manual.

Use it from your coding agent

Most components get picked by whatever is writing the code. The MCP server puts the whole catalogue inside Claude Code, Cursor, Windsurf and anything else that speaks MCP, so your agent can search for a component and read its real props instead of guessing.

claude mcp add uibeats -- npx -y @uibeats/mcp

It exposes four tools: search_components, get_component, list_components and get_install_command. See packages/mcp or the MCP docs.

For agents that only fetch URLs, the same content is served as plain text:

URL	What it is
/llms.txt	Index of every component, linking to its markdown
/llms-full.txt	Every component's props and full source, in one file
/docs/<category>/<name>.md	Any component page as markdown, just add .md
/r/components.json	The catalogue as JSON, with props and guidance. CORS is open

Tune before you copy

Every component has a playground at /playground/<category>/<name>: the props table becomes a live control panel, the preview updates as you drag, and the snippet carries only what you actually changed. All 52 of them.

The controls are derived from the same props array that renders the documentation table, so a control can never describe a prop the docs do not.

Alongside it, Motion Studio, a cubic-bezier and spring editor. Drag the curve or tune stiffness, damping and mass, watch it run on three properties at once, and copy the Motion transition or the CSS. Springs are integrated from the same damped-oscillator model Motion uses rather than approximated with a bezier, so the preview is the motion you will ship.

Components

52 components across six categories: