UI Beats · Animated React components you own

# UI Beats > Beautifully designed, animated React components built with React, TypeScript, Tailwind CSS and Motion. Copy, paste, or install with the shadcn CLI. UI Beats is not an npm package. Components are copied into your project and you own the code afterwards. There is no wrapper API and no version to pin. Install any component with the shadcn CLI: ```bash npx shadcn@latest add https://uibeats.com/r/<component>.json ``` Every component below links to a markdown document containing its full source, props table and a runnable example. ## Block Whole landing page sections, assembled from the components in this library. Install one and it brings its parts with it, then edit the section like any other file in your project. - [Feature Grid](https://uibeats.com/docs/block/feature-grid.md): The FeatureGrid block arranges a set of features into a bento layout, letting each one declare how many columns it spans so the arrangement itself ranks them. - [Hero](https://uibeats.com/docs/block/hero.md): The Hero block is a complete landing page opening: eyebrow, headline, description, two calls to action and a row of faces for social proof, over a field of falling meteors. Installing it installs the three components it is built from. - [Pricing](https://uibeats.com/docs/block/pricing.md): The Pricing block lays out a row of plans and traces the recommended one with a travelling Border Beam, so the tier you want chosen is the one that moves rather than the one wearing another badge. ## Animation Entrance and scroll-triggered animations for React. Each one wraps your existing markup, so you can add motion without restructuring a component. - [Animated List](https://uibeats.com/docs/animation/animated-list.md): The AnimatedList component streams its children in one at a time, springing each new entry into place and pushing the older ones down until they fall out of the bottom of the list. - [Bounce](https://uibeats.com/docs/animation/bounce.md): The Bounce component add