Overview

UI Beats is an MIT-licensed collection of 55 animated React components by Nikhil Singh, built with TypeScript, Tailwind CSS and Motion. It is not a package to import from: each component is added to a project as source through the shadcn CLI or copied manually, so it can be changed freely.

Components read shadcn's own CSS variables, so installed components take on the project's palette. Every component honors prefers-reduced-motion, which is enforced by a CI test. An MCP server exposes the catalogue to coding agents such as Claude Code, Cursor and Windsurf, and llms.txt files serve the same content as plain text. The docs site runs on Next.js 16, React 19 and Tailwind 4.

Features

Six categories: Animation, background, button, card, component and text, plus feature grid, hero and pricing blocks.
Backgrounds: Animated beam, aurora, meteors, orbiting elements, particles, retro grid and sparkling grid.
Interactive components: Dock, liquid tabs, scratch to reveal, comparison slider, terminal, timeline and progress ring.
Text effects: Flip words, split flap, text scramble, text shine, text writer and number ticker.
Playgrounds: Each component's props table doubles as a live control panel, and the copied snippet includes only changed props.
Motion Studio: A cubic-bezier and spring editor that outputs a Motion transition or CSS.
Agent support: An MCP server with search_components, get_component, list_components and get_install_command tools.

Tech stack

React 19, TypeScript, Tailwind CSS 4, Motion, Next.js 16 (docs site)

Getting started

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