sh4dcnv2 · atlas
← libraries

@amicro

Open-source React micro-interactions and UI component registry powered by Motion.

169 components pro available react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://amicro.vercel.app/r/registry.json
pnpm pnpm dlx shadcn@latest add https://amicro.vercel.app/r/registry.json
bun bunx shadcn@latest add https://amicro.vercel.app/r/registry.json
fetch registry curl -s https://amicro.vercel.app/r/registry.json

Components

169 total
Fade In ui

Basic fade entrance animation.

npx shadcn@latest add https://amicro.vercel.app/r/fade-in.json
Fade Up ui

Fade with upward translation.

npx shadcn@latest add https://amicro.vercel.app/r/fade-up.json
Fade Down ui

Fade with downward translation.

npx shadcn@latest add https://amicro.vercel.app/r/fade-down.json
Slide Left ui

Slide in from right to left.

npx shadcn@latest add https://amicro.vercel.app/r/slide-left.json
Slide Right ui

Slide in from left to right.

npx shadcn@latest add https://amicro.vercel.app/r/slide-right.json
Scale In ui

Scale transition from small to actual size.

npx shadcn@latest add https://amicro.vercel.app/r/scale-in.json
Zoom In ui

Scale transition combined with deep blur/depth effect.

npx shadcn@latest add https://amicro.vercel.app/r/zoom-in.json
Text Reveal ui

Line-by-line slide/reveal text effect.

npx shadcn@latest add https://amicro.vercel.app/r/text-reveal.json
Word Reveal ui

Word-by-word fade and scale stagger reveal effect.

npx shadcn@latest add https://amicro.vercel.app/r/word-reveal.json
Blur Text ui

Blur transition for text container/headings.

npx shadcn@latest add https://amicro.vercel.app/r/blur-text.json
Character Stagger ui

Character-by-character radial or linear stagger animation.

npx shadcn@latest add https://amicro.vercel.app/r/character-stagger.json
Card Hover ui

Dynamic floating card effect on hover.

npx shadcn@latest add https://amicro.vercel.app/r/card-hover.json
Tilt Card ui

3D parallax tilt effect following mouse cursor.

npx shadcn@latest add https://amicro.vercel.app/r/tilt-card.json
Magnetic Button ui

A button that pulls slightly towards the user's cursor.

npx shadcn@latest add https://amicro.vercel.app/r/magnetic-button.json
Glow Button ui

Glow/border animation following the cursor.

npx shadcn@latest add https://amicro.vercel.app/r/glow-button.json
Cursor Trail ui

Custom cursor with particle/dots trail.

npx shadcn@latest add https://amicro.vercel.app/r/cursor-trail.json
Spotlight ui

Masked spotlight highlighting container content on hover.

npx shadcn@latest add https://amicro.vercel.app/r/spotlight.json
Mouse Follow ui

Smooth spring physics element trailing mouse cursor.

npx shadcn@latest add https://amicro.vercel.app/r/mouse-follow.json
Scroll Reveal ui

Reveal content block as it scrolls into viewport.

npx shadcn@latest add https://amicro.vercel.app/r/scroll-reveal.json
Progress Indicator ui

Horizontal page scroll progress indicator bar.

npx shadcn@latest add https://amicro.vercel.app/r/progress-indicator.json
Sticky Reveal ui

Apple-style scroll-linked side sticky content reveal.

npx shadcn@latest add https://amicro.vercel.app/r/sticky-reveal.json
Skeleton ui

Loading skeleton with smooth shimmer sweep.

npx shadcn@latest add https://amicro.vercel.app/r/skeleton.json
Pulse ui

Pulsing scaling animation for loading elements.

npx shadcn@latest add https://amicro.vercel.app/r/pulse.json
Morph Loader ui

Gooey/morphing shape loader.

npx shadcn@latest add https://amicro.vercel.app/r/morph-loader.json
Use Scroll Progress hook

Calculates current page/container scroll progress percentage.

npx shadcn@latest add https://amicro.vercel.app/r/use-scroll-progress.json
Use Mouse Position hook

Tracks target element mouse coordinate offsets.

npx shadcn@latest add https://amicro.vercel.app/r/use-mouse-position.json
Use Stagger hook

Calculates custom delays for child stagger layouts.

npx shadcn@latest add https://amicro.vercel.app/r/use-stagger.json
Use Reduced Motion hook

Detects client system reduced motion media query standard.

npx shadcn@latest add https://amicro.vercel.app/r/use-reduced-motion.json
Use Web Haptics hook

Provides responsive device haptic feedback and vibrations for web interfaces.

npx shadcn@latest add https://amicro.vercel.app/r/use-web-haptics.json
Presets lib

A set of spring configuration presets for Motion.

npx shadcn@latest add https://amicro.vercel.app/r/presets.json
Utils lib

Motion utility functions (cn helper, mapRange).

npx shadcn@latest add https://amicro.vercel.app/r/utils.json
Accordion Loader ui

Accordion Loader loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/accordion-loader.json
App Icon Load ui

App Icon Load loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/app-icon-load.json
Apple Breathe ui

Apple Breathe loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/apple-breathe.json
Apple Equalizer ui

Apple Equalizer loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/apple-equalizer.json
Apple Icon Morph ui

Apple Icon Morph loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/apple-icon-morph.json
Apple Pulse Dots ui

Apple Pulse Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/apple-pulse-dots.json
Apple Scale Pulse ui

Apple Scale Pulse loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/apple-scale-pulse.json
Apple Sound Wave ui

Apple Sound Wave loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/apple-sound-wave.json
Apple Text Reveal ui

Apple Text Reveal loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/apple-text-reveal.json
Apple Unlock ui

Apple Unlock loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/apple-unlock.json
Arc Tracer ui

Arc Tracer loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/arc-tracer.json
Bar Cascade ui

Bar Cascade loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/bar-cascade.json
Bar Sweep ui

Bar Sweep loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/bar-sweep.json
Bobbing Dots ui

Bobbing Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/bobbing-dots.json
Bounce Dots ui

Bounce Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/bounce-dots.json
Bouncing Bars ui

Bouncing Bars loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/bouncing-bars.json
Bouncing Dots ui

Bouncing Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/bouncing-dots.json
Bouncing Lines ui

Bouncing Lines loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/bouncing-lines.json
Bouncing Square ui

Bouncing Square loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/bouncing-square.json
Breathe Ring ui

Breathe Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/breathe-ring.json
Breathing Glow ui

Breathing Glow loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/breathing-glow.json
Breathing Square ui

Breathing Square loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/breathing-square.json
Circular Bars ui

Circular Bars loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/circular-bars.json
Classic Spinner ui

Classic Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/classic-spinner.json
Clock Spinner ui

Clock Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/clock-spinner.json
Comet Spinner ui

Comet Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/comet-spinner.json
Concentric Pulse ui

Concentric Pulse loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/concentric-pulse.json
Concentric Ring ui

Concentric Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/concentric-ring.json
Concentric Squares ui

Concentric Squares loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/concentric-squares.json
Conveyor Loop ui

Conveyor Loop loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/conveyor-loop.json
Cross Spinner ui

Cross Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/cross-spinner.json
Cube Flip Spring ui

Cube Flip Spring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/cube-flip-spring.json
Dash Ring ui

Dash Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/dash-ring.json
Dashed Spiral ui

Dashed Spiral loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/dashed-spiral.json
Diamond Grid ui

Diamond Grid loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/diamond-grid.json
Diamond Rotate Spring ui

Diamond Rotate Spring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/diamond-rotate-spring.json
Dot Spinner ui

Dot Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/dot-spinner.json
Dots Ring ui

Dots Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/dots-ring.json
Double Ring ui

Double Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/double-ring.json
Drop Dot ui

Drop Dot loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/drop-dot.json
Dual Arc ui

Dual Arc loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/dual-arc.json
Dynamic Island ui

Dynamic Island loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/dynamic-island.json
Elastic Bars ui

Elastic Bars loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/elastic-bars.json
Elastic Square ui

Elastic Square loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/elastic-square.json
Expanding Cross ui

Expanding Cross loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/expanding-cross.json
Face Id Scan ui

Face Id Scan loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/face-id-scan.json
Fade Arc ui

Fade Arc loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/fade-arc.json
Fade Dots ui

Fade Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/fade-dots.json
Flip Square ui

Flip Square loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/flip-square.json
Floating Diamonds ui

Floating Diamonds loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/floating-diamonds.json
Fluid Bars ui

Fluid Bars loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/fluid-bars.json
Fluid Diamond ui

Fluid Diamond loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/fluid-diamond.json
Fluid Dot Orbit ui

Fluid Dot Orbit loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/fluid-dot-orbit.json
Fluid Skeleton ui

Fluid Skeleton loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/fluid-skeleton.json
Gears ui

Gears loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/gears.json
Glassmorphic Card ui

Glassmorphic Card loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/glassmorphic-card.json
Gradient Arc ui

Gradient Arc loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/gradient-arc.json
Grid Dots ui

Grid Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/grid-dots.json
Haptic Ring ui

Haptic Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/haptic-ring.json
Heartbeat ui

Heartbeat loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/heartbeat.json
Hexagon Spinner ui

Hexagon Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/hexagon-spinner.json
Hourglass ui

Hourglass loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/hourglass.json
Infinity Path ui

Infinity Path loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/infinity-path.json
Intersecting Rings ui

Intersecting Rings loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/intersecting-rings.json
Ios Spinner ui

Ios Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/ios-spinner.json
Line Spinner ui

Line Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/line-spinner.json
Liquid Dots ui

Liquid Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/liquid-dots.json
Mac Terminal ui

Mac Terminal loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/mac-terminal.json
Magnetic Dots ui

Magnetic Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/magnetic-dots.json
Minimal Triangle ui

Minimal Triangle loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/minimal-triangle.json
Morph Dot Ring ui

Morph Dot Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/morph-dot-ring.json
Morphing Bars ui

Morphing Bars loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/morphing-bars.json
Morphing Infinity ui

Morphing Infinity loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/morphing-infinity.json
Morphing Ring ui

Morphing Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/morphing-ring.json
Morphing Shape ui

Morphing Shape loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/morphing-shape.json
Newtons Cradle ui

Newtons Cradle loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/newtons-cradle.json
Offset Rings ui

Offset Rings loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/offset-rings.json
Orbiting Circles ui

Orbiting Circles loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/orbiting-circles.json
Orbiting Dot ui

Orbiting Dot loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/orbiting-dot.json
Origami Shape ui

Origami Shape loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/origami-shape.json
Pendulum ui

Pendulum loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/pendulum.json
Pulsating Dots ui

Pulsating Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/pulsating-dots.json
Pulse Dot ui

Pulse Dot loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/pulse-dot.json
Pulse Dots ui

Pulse Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/pulse-dots.json
Pulse Square ui

Pulse Square loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/pulse-square.json
Pumping Heart ui

Pumping Heart loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/pumping-heart.json
Radar Sweep ui

Radar Sweep loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/radar-sweep.json
Ring Sweep ui

Ring Sweep loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/ring-sweep.json
Ripple Effect ui

Ripple Effect loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/ripple-effect.json
Rotating Cross ui

Rotating Cross loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/rotating-cross.json
Rotating Triangle ui

Rotating Triangle loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/rotating-triangle.json
Shape Shift Grid ui

Shape Shift Grid loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/shape-shift-grid.json
Shimmer Line ui

Shimmer Line loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/shimmer-line.json
Siri Wave ui

Siri Wave loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/siri-wave.json
Skeleton Loader ui

Skeleton Loader loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/skeleton-loader.json
Sliding Bars ui

Sliding Bars loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/sliding-bars.json
Smooth Dot Shift ui

Smooth Dot Shift loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/smooth-dot-shift.json
Smooth Ring ui

Smooth Ring loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/smooth-ring.json
Smooth Rounded Square ui

Smooth Rounded Square loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/smooth-rounded-square.json
Spinning Squares ui

Spinning Squares loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/spinning-squares.json
Spiral Spinner ui

Spiral Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/spiral-spinner.json
Spring Bars ui

Spring Bars loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/spring-bars.json
Spring Dot Matrix ui

Spring Dot Matrix loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/spring-dot-matrix.json
Spring Hexagon ui

Spring Hexagon loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/spring-hexagon.json
Spring Ring Expand ui

Spring Ring Expand loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/spring-ring-expand.json
Spring Text Pop ui

Spring Text Pop loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/spring-text-pop.json
Square Accordion ui

Square Accordion loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/square-accordion.json
Square Grid ui

Square Grid loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/square-grid.json
Square Snake ui

Square Snake loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/square-snake.json
Square Spinner ui

Square Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/square-spinner.json
Stacked Bar Pulse ui

Stacked Bar Pulse loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/stacked-bar-pulse.json
Swapping Dots ui

Swapping Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/swapping-dots.json
Swirling Spinner ui

Swirling Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/swirling-spinner.json
Symmetric Wave ui

Symmetric Wave loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/symmetric-wave.json
Terminal Loader ui

Terminal Loader loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/terminal-loader.json
Text Blink ui

Text Blink loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/text-blink.json
Text Dots ui

Text Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/text-dots.json
Text Morph ui

Text Morph loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/text-morph.json
Text Shimmer Wave ui

Text Shimmer Wave loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/text-shimmer-wave.json
Text Shimmer ui

Text Shimmer loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/text-shimmer.json
Trailing Dots ui

Trailing Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/trailing-dots.json
Triple Dot Spinner ui

Triple Dot Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/triple-dot-spinner.json
Twin Orbit ui

Twin Orbit loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/twin-orbit.json
Typing Indicator ui

Typing Indicator loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/typing-indicator.json
Typing ui

Typing loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/typing.json
Wandering Cube ui

Wandering Cube loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/wandering-cube.json
Watch Spinner ui

Watch Spinner loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/watch-spinner.json
Wave Dots ui

Wave Dots loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/wave-dots.json
Wave Physics Loader ui

Wave Physics Loader loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/wave-physics-loader.json
Waveform Loader ui

Waveform Loader loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/waveform-loader.json
Zig Zag Pulse ui

Zig Zag Pulse loading animation.

npx shadcn@latest add https://amicro.vercel.app/r/zig-zag-pulse.json
Page Transition ui

Dynamic fullscreen page transition animation.

npx shadcn@latest add https://amicro.vercel.app/r/page-transition.json
Interactive 3D Carousel block

An interactive arc-based 3D motion carousel featuring smooth dot indicators and dynamic prev/next controls.

npx shadcn@latest add https://amicro.vercel.app/r/card-carousel.json
CoverFlow Carousel block

A premium 3D CoverFlow carousel displaying cards along a perspective path.

npx shadcn@latest add https://amicro.vercel.app/r/card-cover-flow.json
Dither Donut Chart block

Interactive pixelated dither donut chart with real-time spring physics.

npx shadcn@latest add https://amicro.vercel.app/r/dither-donut-chart.json
Dither Growth Chart block

60fps canvas growth line chart with pixel dither fill matrix.

npx shadcn@latest add https://amicro.vercel.app/r/dither-growth-chart.json
Uptime Dither Bar Chart block

Continuous uptime bar chart with dithered matrix animation.

npx shadcn@latest add https://amicro.vercel.app/r/uptime-chart.json
Activity Dither Heatmap block

GitHub-style activity heatmap with interactive dither dots.

npx shadcn@latest add https://amicro.vercel.app/r/activity-heatmap.json