Animated React components

Explore free, open-source animated React components built with Motion and Tailwind CSS. Copy the TypeScript source into your app and customize every interaction.

New

All animated components

Animated Alert

Composable feedback with smooth transitions.

Animated Collapsible

Expandable content with a smooth reveal.

Aspect Ratio

Responsive media with smooth aspect ratio transitions.

Arc Picker

Radial text picker with top, bottom, left or right curves, smooth wheel movement and live selection on each scroll step. One persistent bracket frame grows and squeezes around each label. Supports drag momentum, keyboard input, disabled choices, controlled or uncontrolled values, forms and reduced motion.

Sortable List

Composable sortable list with group, item, drag handle, content and undo parts, plus a shared state hook. Spring layout, keyboard reordering, accessible position announcements, and controlled or uncontrolled items.

Image Viewer

A composable React image viewer for galleries and attachment previews, with animated lightbox variants, custom thumbnails and controls, swipe and keyboard navigation, zoom and pan, accessible focus management, and controlled or uncontrolled selection.

Date Range Picker

Composable date range picker with root, trigger, popover content, calendar, header, grid, summary, footer, clear and preset parts, plus a shared state hook. Compact inline and dropdown compositions, direct month and year selection, and full keyboard navigation.

Card

Composable card with header, title, description, action, content and footer parts. Outlined or muted surfaces, standard or compact spacing, and an opt-in selectable state with press feedback that composes with Checkbox, Radio and Button.

Color Picker

Composable color picker whose trigger chip morphs into the saturation and brightness area. A loupe lifts off each thumb while you drag. Includes hue and opacity sliders, hex, RGB and HSL fields, an eye dropper, presets, full keyboard control, and a controlled or uncontrolled value.

Animated Color Selector

Composable color swatches with a spring-gliding selection ring, press feedback, native radio keyboard navigation, and controlled or uncontrolled state.

Animated Breadcrumb

Composable breadcrumb navigation with soft path transitions, a hoverable overflow dropdown for long trails, custom separators, and router-link support.

Tilt Card

3D perspective tilt on hover with cursor-tracked glare.

Button

Spring-pressed Button plus StatefulButton, MagneticButton, and MetallicButton variants.

Animated CTA Buttons

Expressive call-to-action buttons with expanding, hold, and slide interactions.

Expandable Control

Click-to-expand button and chip controls that reveal a label or trailing action through spring layout continuity.

Adaptive Stepper

Composable numeric stepper whose fixed footprint adapts at its minimum and maximum while the value rolls between steps.

Marquee

Infinite horizontal or vertical scroll with pause-on-hover.

Tabs

Pill, segment or underline tabs with a spring layoutId indicator and optional icons.

Switch

Toggle with a spring-driven thumb and press feedback.

Input

Text input with label, left/right icons, optional stable error row, error shake and success check draw.

Select

Composable select primitives whose panel unfolds out of the trigger on one spring and pulls away into its own pill, plus a Morph variant where the trigger grows into the panel via shared layout.

Combobox

Searchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.

Multi Select

Composable multi-select primitives with searchable options, removable animated tokens, and a morphing collision-aware panel.

Checkbox

Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.

Radio Group

Single-select choice control with a gliding layoutId indicator dot and spring press feedback.

Bottom Sheet

Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.

Pull to Refresh

Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.

Shared Layout Background

A pill that glides between hovered items via motion's shared layout, with blur enter/exit.

Bounce Sidebar

A vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.

Animated Sidebar

A composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and becomes a focus-managed sheet on mobile.

File Tree

Composable file and folder primitives with springing branches, a gliding selection, and complete keyboard navigation.

Preview Rail

Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.

Dock

macOS-style dock with grouped actions and a gliding active pill.

Tooltip

Composable hover, focus and tap tooltip with a subtle scale and fade, collision-aware side and alignment, an optional arrow, a pointer corridor onto hoverable content, one label at a time, keyboard-only focus reveal and optional cursor tracking.

Animated Context Menu

Composable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard navigation, typeahead, and long-press support.

Popover

Gooey popover whose panel oozes out of the trigger through an SVG goo filter with a liquid neck that stretches and pinches, then crisp content fades in on top. The Morph variant reveals its full-size panel from the corner nearest the trigger on one synchronized spring clip. Click or hover trigger, controlled or uncontrolled.

Morphing Modal

Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.

Center Morph Modal

A composable modal whose full-size surface unfolds from its exact center toward every edge, then folds back the same way with an inset close control.

Text Animation

Animated text primitives for spring reveals, chromatic sweeps, shimmer loading states, letter-cascade swaps and character scrambles.

Number Animation

Animated number primitives for count-up values, rolling tickers, and fixed-slot digit swaps.

Animated Badge

Status badge with animated state icons, pulse feedback and compact size variants.

Action Swap

CTA button and slot primitives for swapping text and icons with blur motion.

Animated Toast Stack

Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.

Theme Toggle

Theme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path reveal, or slats that open across the screen like a shutter.

Bouncy Accordion

Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.

Drawer

Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.

Scroll Animation

Scroll-driven motion: a Lenis smooth-scroll provider and a reading-progress indicator that reads from it.

Range Slider

Slider with tick dots and a vertical-bar thumb that bounces as it lands on each step. Drag or keyboard, reduced-motion safe.

Wheel Picker

iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control. Composes side by side for date and time pickers, reduced-motion safe.

Table

Virtualized data table that stays smooth at 10k+ rows, with sortable headers, row selection, column resize and reorder, and a sticky header. Minimal, reduced-motion-safe motion.

Shader Background

Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.

Cylinder Carousel

A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.

Loader

Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five terminal-style ascii spinners. Scales from one size prop, uses currentColor, and reduced-motion swaps every transform for a calm opacity pulse.