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.
Browse motion components for navigation, forms, text, feedback, overlays, and scroll experiences. Each one includes a live preview, install command, source code, API reference, and reduced-motion support.
New
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.
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.
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.
All animated components
Tilt Card
3D perspective tilt on hover with cursor-tracked glare.
Button
Spring-pressed Button plus StatefulButton (idle → loading → success / error) and MagneticButton.
Animated CTA Buttons
Expressive call-to-action buttons with expanding, hold, and slide interactions.
Marquee
Infinite horizontal or vertical scroll with pause-on-hover.
Tabs
Pill, segment or underline tabs with a spring layoutId indicator.
Switch
Toggle with a spring-driven thumb and press feedback.
Input
Text input with label, left/right icons, error shake and success check draw.
Select
Composable select primitives whose panel bouncily unfolds out of the trigger and separates, plus a Morph variant where the trigger grows into the panel via shared layout.
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.
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
Hover or focus tooltip with blur enter/exit and spring spawn.
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 — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. 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 and letter-cascade swaps.
Number Animation
Animated number primitives for count-up values and rolling digit tickers.
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.
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.
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.