@motion-primitives
Motion Primitives is a curated open-source library of beautifully designed, easy-to-integrate motion components built with Motion (formerly Framer Motion) and Tailwind CSS, distributed via shadcn CLI. The components directory ships primitives focused purely on animation and transition behaviors — including Blur Fade, animated transitions, gestures, and layout effects — rather than full UI widgets. Designed as a complement to shadcn/ui, not a replacement. MIT licensed; actively developed with regular new component releases. Use for: layering production-quality entrance animations, shared layout transitions, and gesture-driven interactions onto components that already exist in a shadcn/ui project.
Install this registry
npx shadcn@latest add https://motion-primitives.com/c/registry.json pnpm dlx shadcn@latest add https://motion-primitives.com/c/registry.json bunx shadcn@latest add https://motion-primitives.com/c/registry.json curl -s https://motion-primitives.com/c/registry.json Components
33 totalA collapsible content component with smooth animations for showing and hiding content.
npx shadcn@latest add https://motion-primitives.com/c/accordion.json A component that provides animated background effects for UI elements.
npx shadcn@latest add https://motion-primitives.com/c/animated-background.json A container component that applies coordinated animations to a group of child elements.
npx shadcn@latest add https://motion-primitives.com/c/animated-group.json A component that animates number changes with smooth transitions.
npx shadcn@latest add https://motion-primitives.com/c/animated-number.json An effect that creates animated border trails around elements on interaction.
npx shadcn@latest add https://motion-primitives.com/c/border-trail.json A component for cycling through elements with smooth transitions.
npx shadcn@latest add https://motion-primitives.com/c/carousel.json A custom cursor component with animated effects and interactions.
npx shadcn@latest add https://motion-primitives.com/c/cursor.json A modal dialog component with smooth entrance and exit animations.
npx shadcn@latest add https://motion-primitives.com/c/dialog.json A component that shows and hides content with animated transitions.
npx shadcn@latest add https://motion-primitives.com/c/disclosure.json A component that triggers animations when elements enter the viewport.
npx shadcn@latest add https://motion-primitives.com/c/in-view.json A slider component that loops infinitely through its content.
npx shadcn@latest add https://motion-primitives.com/c/infinite-slider.json A panel component with smooth transitions between different states.
npx shadcn@latest add https://motion-primitives.com/c/transition-panel.json A component that applies animated effects to text content.
npx shadcn@latest add https://motion-primitives.com/c/text-effect.json A component that cycles through different text phrases with animations.
npx shadcn@latest add https://motion-primitives.com/c/text-loop.json A component that morphs between different text strings with smooth transitions.
npx shadcn@latest add https://motion-primitives.com/c/text-morph.json A component that animates text with a rolling effect.
npx shadcn@latest add https://motion-primitives.com/c/text-roll.json A component that creates a scrambling text effect during transitions.
npx shadcn@latest add https://motion-primitives.com/c/text-scramble.json A component that applies a shimmering effect to text.
npx shadcn@latest add https://motion-primitives.com/c/text-shimmer.json A component that creates a wave-like shimmer effect on text.
npx shadcn@latest add https://motion-primitives.com/c/text-shimmer-wave.json A component that creates a magnetic attraction effect on hover.
npx shadcn@latest add https://motion-primitives.com/c/magnetic.json A dialog that morphs from its trigger element with smooth transitions.
npx shadcn@latest add https://motion-primitives.com/c/morphing-dialog.json A popover component that morphs from its trigger with fluid animations.
npx shadcn@latest add https://motion-primitives.com/c/morphing-popover.json A macOS-style dock component with scaling and movement effects.
npx shadcn@latest add https://motion-primitives.com/c/dock.json A component that creates a glowing effect on elements based on cursor movement.
npx shadcn@latest add https://motion-primitives.com/c/glow-effect.json A component for comparing two images with an interactive slider.
npx shadcn@latest add https://motion-primitives.com/c/image-comparison.json A toolbar component with dynamic appearance based on user interaction.
npx shadcn@latest add https://motion-primitives.com/c/toolbar-dynamic.json An expandable toolbar that reveals additional options with animations.
npx shadcn@latest add https://motion-primitives.com/c/toolbar-expandable.json A component that applies progressive blur effects to elements.
npx shadcn@latest add https://motion-primitives.com/c/progressive-blur.json A component that visualizes scroll progress with animated indicators.
npx shadcn@latest add https://motion-primitives.com/c/scroll-progress.json A component that transitions between numbers with a sliding animation.
npx shadcn@latest add https://motion-primitives.com/c/sliding-number.json A component that creates a spotlight effect following cursor movement.
npx shadcn@latest add https://motion-primitives.com/c/spotlight.json A component that animates text with a spinning rotation effect.
npx shadcn@latest add https://motion-primitives.com/c/spinning-text.json A component that applies 3D tilt effects to elements based on cursor position.
npx shadcn@latest add https://motion-primitives.com/c/tilt.json