# 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 adds a playful, elastic animation to its children when they enter the viewport.
- [Fade In](https://uibeats.com/docs/animation/fade-in.md): The FadeIn component creates a smooth fade-in animation for its children when they enter the viewport.
- [Fade In Unblur](https://uibeats.com/docs/animation/fade-in-unblur.md): The FadeInUnblur component creates a smooth fade-in while unblurring animation for its children when they enter the viewport.
- [Rotate In](https://uibeats.com/docs/animation/rotate-in.md): The RotateIn component creates a smooth rotation animation for its children when they enter the viewport.
- [Scale In](https://uibeats.com/docs/animation/scale-in.md): The ScaleIn component creates a smooth scale-in animation for its children when they enter the viewport.
- [Smooth Reveal](https://uibeats.com/docs/animation/smooth-reveal.md): The SmoothReveal component creates a smooth reveal animation for its children when they enter the viewport.
- [Stagger List](https://uibeats.com/docs/animation/stagger-list.md): The StaggerList component animates its children into view one after another when the list enters the viewport, without requiring any changes to the children themselves.

## Background

Animated background layers for React. Drop one behind a hero or section and layer your content above it.

- [Animated Beam](https://uibeats.com/docs/background/animated-beam.md): The AnimatedBeam component draws a curved line between any two elements and sends a gradient pulse along it, remeasuring whenever the layout moves.
- [Aurora](https://uibeats.com/docs/background/aurora.md): The Aurora component drifts three soft bands of colour behind your content on different periods, so the layer keeps rearranging itself instead of looping visibly. Pure CSS gradients and transforms, no canvas.
- [Dot Pattern](https://uibeats.com/docs/background/dot-pattern.md): The DotPattern component tiles a grid of dots behind your content and lights the ones nearest the pointer, using a masked second copy of the same grid so the bright dots land exactly on the dim ones.
- [Gradient Flow](https://uibeats.com/docs/background/gradient-flow.md): The GradientFlow component creates a flowing gradient animation effect for its children, adding visual interest to backgrounds or UI elements.
- [Meteors](https://uibeats.com/docs/background/meteors.md): The Meteors component drops a field of glowing streaks across its container, each one falling at its own pace so the shower never settles into a repeating pattern.
- [Orbiting Elements](https://uibeats.com/docs/background/orbiting-elements.md): The OrbitingElements component places children evenly around a circle and rotates them around a centre point, keeping each one upright.
- [Particles](https://uibeats.com/docs/background/particles.md): The Particles component draws a drifting field of specks on a canvas and scatters them away from the pointer, holding positions as fractions of the frame so a resize redraws the field instead of reshuffling it.
- [Retro Grid](https://uibeats.com/docs/background/retro-grid.md): The RetroGrid component lays an infinite grid back in 3D and scrolls it toward the viewer, fading out into a horizon. A synthwave backdrop drawn entirely in CSS.
- [Sparkling Grid](https://uibeats.com/docs/background/sparkling-grid.md): The SparklingGrid component creates an animated grid of dots that ripples outward on mount and sparkles at random, ideal for dynamic, atmospheric backgrounds.

## Button

Interactive React buttons with motion built in, for the moments where a call to action should feel alive.

- [Confetti Button](https://uibeats.com/docs/button/confetti-button.md): The ConfettiButton component throws a burst of confetti from its own centre when pressed, measuring the button's position at click time so the pieces come from the thing the reader actually pressed.
- [Loading Button](https://uibeats.com/docs/button/loading-button.md): The LoadingButton component runs one async action and reports on it in place: it swaps to a spinner while the request is open, confirms with a tick when it resolves, and returns to its resting label on its own.
- [Magnetic Button](https://uibeats.com/docs/button/magnetic-button.md): The MagneticButton component drifts toward the pointer as it approaches and springs back when the pointer leaves, making calls to action feel responsive before they are even clicked.
- [Rainbow Button](https://uibeats.com/docs/button/rainbow-button.md): The RainbowButton component rings a call to action with a band of colour that travels around it, drawn from the project's own chart tokens so the palette re-themes with the rest of the app.
- [Ripple Button](https://uibeats.com/docs/button/ripple-button.md): The RippleButton component sends a ripple out from the exact point it was pressed, sized to reach the button's farthest corner so the whole surface floods however near the edge you click.
- [Shimmer Button](https://uibeats.com/docs/button/shimmer-button.md): The ShimmerButton component sweeps a band of light across its face on a loop, giving a call to action a slow pulse of movement without asking the reader to hover, click or scroll first.
- [Subscribe Button](https://uibeats.com/docs/button/subscribe-button.md): The SubscribeButton component is an interactive button for subscription actions, modelled on the YouTube subscribe animation, with customisable styles and timings.

## Card

React card components with depth, motion and hover behaviour, for feature grids, pricing and showcases.

- [Card Stack](https://uibeats.com/docs/card/card-stack.md): The CardStack component deals your content as a deck: drag the top card aside to throw it away, the cards behind rise a step, and the dismissed card loops around to the back.
- [Expandable Card](https://uibeats.com/docs/card/expandable-card.md): The ExpandableCard component grows any row of a list into a detail panel in place, sharing a layout id between the two so the card the reader pressed is visibly the card that opens rather than one fading out as a dialog fades in.
- [Flip Card](https://uibeats.com/docs/card/flip-card.md): The FlipCard component creates an elegant, Apple-inspired interactive card that flips to reveal additional content. It features smooth animations, subtle gradients, and a clean design that's perfect for showcasing key information or features.
- [Glowing Card](https://uibeats.com/docs/card/glowing-card.md): The GlowingCard component tracks the cursor across the card and paints a soft glow wherever it goes, so the surface reacts as the pointer moves over it.
- [Morphing Card](https://uibeats.com/docs/card/morphing-card.md): The MorphingCard component creates an engaging, interactive card that smoothly transitions between different shapes and content. It features elegant 3D rotations, customizable gradients, and a clean design that's perfect for showcasing key information or features in a visually striking manner.
- [Tilt Card](https://uibeats.com/docs/card/tilt-card.md): The TiltCard component tilts toward the pointer in 3D and tracks it with a specular highlight, giving flat cards a tactile, physical feel.

## Component

Utility React components for the states between content: loading placeholders, skeletons and effects.

- [Avatar Stack](https://uibeats.com/docs/component/avatar-stack.md): The AvatarStack component overlaps a row of avatars into a single group, collapses everyone past a limit into a +N chip, and lifts an avatar clear of its neighbours on hover without the row changing width.
- [Bento Grid](https://uibeats.com/docs/component/bento-grid.md): The BentoGrid component arranges cards of different sizes into the asymmetric layout known as a bento box, with each cell declaring how many columns and rows it spans and every card collapsing to full width on small screens.
- [Border Beam](https://uibeats.com/docs/component/border-beam.md): The BorderBeam component wraps any content in a border traced by a travelling beam of light. It follows the container's rounded corners exactly, and nothing around it moves.
- [Comparison Slider](https://uibeats.com/docs/component/comparison-slider.md): The ComparisonSlider component stacks two layers and reveals one against the other with a divider the reader drags, clipping the top layer rather than resizing it so neither side reflows as the divider moves.
- [Dock](https://uibeats.com/docs/component/dock.md): The Dock component recreates the macOS dock: items swell as the pointer approaches, and each one names itself in a tooltip on hover or focus.
- [Liquid Tabs](https://uibeats.com/docs/component/liquid-tabs.md): The LiquidTabs component is a tab switcher whose selection pill flows between tabs, stretching in proportion to how fast it is travelling and settling back into shape as it lands.
- [Marquee](https://uibeats.com/docs/component/marquee.md): The Marquee component scrolls its children in a seamless, infinite loop, with pause-on-hover and faded edges.
- [Progress Ring](https://uibeats.com/docs/component/progress-ring.md): The ProgressRing component sweeps an arc round to a value and counts a label up alongside it, driving both from one animation so the number can never finish ahead of the arc describing it.
- [Scratch to Reveal](https://uibeats.com/docs/component/scratch-to-reveal.md): The ScratchToReveal component covers your content in a foil the user rubs away with a pointer, firing onComplete and dropping the rest of the foil once enough has been cleared.
- [Scroll Progress](https://uibeats.com/docs/component/scroll-progress.md): The ScrollProgress component fills a thin bar as the reader moves through a page or a panel, scaling a single transform rather than resizing an element so it costs nothing on the scroll frame.
- [Shimmer Effect](https://uibeats.com/docs/component/shimmer-effect.md): The ShimmerEffect component creates a shimmering animation, ideal for loading placeholders or skeleton screens.
- [Terminal](https://uibeats.com/docs/component/terminal.md): The Terminal component replays a shell session, typing the commands character by character and printing everything else whole, with the pause sitting in front of each output line where the work would have happened.
- [Timeline](https://uibeats.com/docs/component/timeline.md): The Timeline component lays events down a vertical rail that fills as the reader scrolls through them, scaling a single element rather than resizing it so the fill costs nothing on the main thread.

## Text

React text animation components for headlines that hold attention: typing, scrambling, shining and swapping.

- [Flip Words](https://uibeats.com/docs/text/flip-words.md): The FlipWords component cycles one slot in a sentence through a list of words, blurring each out as the next rises into its place and animating the width difference so the rest of the line never jumps.
- [Gradient Text](https://uibeats.com/docs/text/gradient-text.md): The GradientText component paints a line of text with a colour ramp that travels across it on a loop, so a headline word carries the accent colour as movement rather than as a flat fill.
- [Gravity Text Swap](https://uibeats.com/docs/text/gravity-text-swap.md): The GravityTextSwap component drops characters into place under a gravity-like fall, so one word gives way to the next instead of simply being replaced.
- [Number Ticker](https://uibeats.com/docs/text/number-ticker.md): The NumberTicker component counts a number up when it scrolls into view, with locale-aware formatting.
- [Scroll Reveal](https://uibeats.com/docs/text/scroll-reveal.md): The ScrollReveal component lights up text word by word as the reader scrolls past it, tied to scroll position rather than a timer.
- [Split Flap](https://uibeats.com/docs/text/split-flap.md): The SplitFlap component turns text into a mechanical departure board, each column riffling through the alphabet until it reaches its letter, a beat behind the column to its left.
- [Text Scramble](https://uibeats.com/docs/text/text-scramble.md): The TextScramble component decodes text one character at a time, cycling through random glyphs before each letter settles into place.
- [Text Shine](https://uibeats.com/docs/text/text-shine.md): The TextShine component sweeps a coloured highlight across your text on a loop, drawing the eye without demanding a click.
- [Text Writer](https://uibeats.com/docs/text/text-writer.md): The TextWriter component creates a typing animation effect for text, where characters appear one by one to mimic real-time typing.

## Getting started

- [Introduction](https://uibeats.com/docs/getting-started/introduction)
- [Installation](https://uibeats.com/docs/getting-started/installation)
- [CLI](https://uibeats.com/docs/getting-started/cli)
- [MCP Server](https://uibeats.com/docs/getting-started/mcp)
- [Contribute](https://uibeats.com/docs/getting-started/contribute)

## Optional

- [Full documentation](https://uibeats.com/llms-full.txt): every component's source and props in one file
- [Machine-readable index](https://uibeats.com/r/components.json): the same catalogue as JSON
- [shadcn registry](https://uibeats.com/r/registry.json): registry index for the shadcn CLI
- [GitHub](https://github.com/nikhils4/ui-beats)