@vue-bits
An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.
Install this registry
npx shadcn@latest add https://vue-bits.dev/r/registry.json pnpm dlx shadcn@latest add https://vue-bits.dev/r/registry.json bunx shadcn@latest add https://vue-bits.dev/r/registry.json curl -s https://vue-bits.dev/r/registry.json Components
132 totalWrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
npx shadcn@latest add https://vue-bits.dev/r/AnimatedContent.json List items enter with staggered motion variants for polished reveals.
npx shadcn@latest add https://vue-bits.dev/r/AnimatedList.json 3D antigravity particle field that repels from the cursor with smooth motion.
npx shadcn@latest add https://vue-bits.dev/r/Antigravity.json Renders text with an animated ASCII background for a retro feel.
npx shadcn@latest add https://vue-bits.dev/r/ASCIIText.json Flowing aurora gradient background.
npx shadcn@latest add https://vue-bits.dev/r/Aurora.json The balatro shader, fully customizalbe and interactive.
npx shadcn@latest add https://vue-bits.dev/r/Balatro.json Physics ball pit simulation with bouncing colorful spheres.
npx shadcn@latest add https://vue-bits.dev/r/Ballpit.json Crossing animated ribbons with customizable properties.
npx shadcn@latest add https://vue-bits.dev/r/Beams.json Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.
npx shadcn@latest add https://vue-bits.dev/r/BlobCursor.json Text starts blurred then crisply resolves for a soft-focus reveal effect.
npx shadcn@latest add https://vue-bits.dev/r/BlurText.json Glowing mesh-gradient border that follows cursor direction and intensifies near edges.
npx shadcn@latest add https://vue-bits.dev/r/BorderGlow.json Cards bounce that bounce in on mount.
npx shadcn@latest add https://vue-bits.dev/r/BounceCards.json Floating circular expanding menu with staggered item reveal.
npx shadcn@latest add https://vue-bits.dev/r/BubbleMenu.json Expandable navigation bar with card panels revealing nested links.
npx shadcn@latest add https://vue-bits.dev/r/CardNav.json Cards animate position swapping with smooth layout transitions.
npx shadcn@latest add https://vue-bits.dev/r/CardSwap.json Responsive carousel with touch gestures, looping and transitions.
npx shadcn@latest add https://vue-bits.dev/r/Carousel.json A responsive grid of grayscale tiles. Hovering the grid reaveals their colors.
npx shadcn@latest add https://vue-bits.dev/r/ChromaGrid.json Circular orbit gallery rotating images.
npx shadcn@latest add https://vue-bits.dev/r/CircularGallery.json Layouts characters around a circle with optional rotation animation.
npx shadcn@latest add https://vue-bits.dev/r/CircularText.json Creates particle spark bursts at click position.
npx shadcn@latest add https://vue-bits.dev/r/ClickSpark.json Vibrant color bends with smooth flowing animation.
npx shadcn@latest add https://vue-bits.dev/r/ColorBends.json Flexible animated counter supporting increments + easing.
npx shadcn@latest add https://vue-bits.dev/r/Counter.json Animated number counter supporting formatting and decimals.
npx shadcn@latest add https://vue-bits.dev/r/CountUp.json Custom crosshair cursor with tracking, and link hover effects.
npx shadcn@latest add https://vue-bits.dev/r/Crosshair.json 3D rotating cube cluster. Supports auto-rotation or hover interaction.
npx shadcn@latest add https://vue-bits.dev/r/Cubes.json Flowing looping text path along a customizable curve with drag interaction.
npx shadcn@latest add https://vue-bits.dev/r/CurvedLoop.json Subtle dark background with a smooth animation and postprocessing.
npx shadcn@latest add https://vue-bits.dev/r/DarkVeil.json Hover parallax effect that disintegrates the content of a card.
npx shadcn@latest add https://vue-bits.dev/r/DecayCard.json Hacker-style decryption cycling random glyphs until resolving to real text.
npx shadcn@latest add https://vue-bits.dev/r/DecryptedText.json Retro dithered noise shader background.
npx shadcn@latest add https://vue-bits.dev/r/Dither.json macOS style magnifying dock with proximity scaling of icons.
npx shadcn@latest add https://vue-bits.dev/r/Dock.json Immersive 3D dome gallery projecting images on a hemispheric surface.
npx shadcn@latest add https://vue-bits.dev/r/DomeGallery.json Interactive dot grid with cursor bulge, glow, sparkle, and wave effects.
npx shadcn@latest add https://vue-bits.dev/r/DotField.json Animated dot grid with cursor interactions.
npx shadcn@latest add https://vue-bits.dev/r/DotGrid.json Slider handle stretches elastically then snaps with spring physics.
npx shadcn@latest add https://vue-bits.dev/r/ElasticSlider.json Jittery electric energy border with animated arcs, glow and adjustable intensity.
npx shadcn@latest add https://vue-bits.dev/r/ElectricBorder.json Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow.
npx shadcn@latest add https://vue-bits.dev/r/EvilEye.json Simple directional fade / slide entrance / exit wrapper with threshold-based activation.
npx shadcn@latest add https://vue-bits.dev/r/FadeContent.json Characters fall with gravity + bounce creating a playful entrance.
npx shadcn@latest add https://vue-bits.dev/r/FallingText.json Terminal CRT scanline squares effect with flicker + noise.
npx shadcn@latest add https://vue-bits.dev/r/FaultyTerminal.json A churning magnetic fluid traced by glowing contour lines, with a cursor magnet.
npx shadcn@latest add https://vue-bits.dev/r/Ferrofluid.json 3D floating lines that react to cursor movement.
npx shadcn@latest add https://vue-bits.dev/r/FloatingLines.json Liquid flowing active indicator glides between menu items.
npx shadcn@latest add https://vue-bits.dev/r/FlowingMenu.json 3D posters rotate on scroll infinitely.
npx shadcn@latest add https://vue-bits.dev/r/FlyingPosters.json Interactive folder opens to reveal nested content smooth motion.
npx shadcn@latest add https://vue-bits.dev/r/Folder.json Vibrating fuzzy text with controllable hover intensity.
npx shadcn@latest add https://vue-bits.dev/r/FuzzyText.json Parallax realistic starfield with pointer interactions.
npx shadcn@latest add https://vue-bits.dev/r/Galaxy.json Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.
npx shadcn@latest add https://vue-bits.dev/r/GhostCursor.json Adds a realistic moving glare highlight on hover over any element.
npx shadcn@latest add https://vue-bits.dev/r/GlareHover.json Icon set styled with frosted glass blur.
npx shadcn@latest add https://vue-bits.dev/r/GlassIcons.json Advanced Apple-style glass surface with real-time distortion + lighting.
npx shadcn@latest add https://vue-bits.dev/r/GlassSurface.json RGB split and distortion glitch effect with jitter effects.
npx shadcn@latest add https://vue-bits.dev/r/GlitchText.json Navigation indicator morphs with gooey blob transitions between items.
npx shadcn@latest add https://vue-bits.dev/r/GooeyNav.json Layered gradient blinds with spotlight and noise distortion.
npx shadcn@latest add https://vue-bits.dev/r/GradientBlinds.json Animated gradient sweep across live text with speed and color control.
npx shadcn@latest add https://vue-bits.dev/r/GradientText.json Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.
npx shadcn@latest add https://vue-bits.dev/r/GradualBlur.json Grainy gradient swirls with soft wave distortion.
npx shadcn@latest add https://vue-bits.dev/r/Grainient.json Warped grid mesh distorts smoothly reacting to cursor.
npx shadcn@latest add https://vue-bits.dev/r/GridDistortion.json Perspective moving grid lines based on cusror position.
npx shadcn@latest add https://vue-bits.dev/r/GridMotion.json Animated grid room 3D scan effect and cool interactions.
npx shadcn@latest add https://vue-bits.dev/r/GridScan.json Animated lines continuously moving to simulate hyperspace travel on click hold.
npx shadcn@latest add https://vue-bits.dev/r/Hyperspeed.json Cursor-based image trail with several built-in variants.
npx shadcn@latest add https://vue-bits.dev/r/ImageTrail.json Horizontally looping menu effect that scrolls endlessly with seamless wrap.
npx shadcn@latest add https://vue-bits.dev/r/InfiniteMenu.json Slick iridescent shader with shifting waves.
npx shadcn@latest add https://vue-bits.dev/r/Iridescence.json Dynamic laser light that flows onto a surface, customizable effect.
npx shadcn@latest add https://vue-bits.dev/r/LaserFlow.json Matrix style letter animation.
npx shadcn@latest add https://vue-bits.dev/r/LetterGlitch.json Colorful light streaks raining down a glowing tunnel with a cursor light.
npx shadcn@latest add https://vue-bits.dev/r/Lightfall.json Procedural lightning bolts with branching and glow flicker.
npx shadcn@latest add https://vue-bits.dev/r/Lightning.json Vertical pillar of light with glow effects.
npx shadcn@latest add https://vue-bits.dev/r/LightPillar.json Volumetric light rays/beams with customizable direction.
npx shadcn@latest add https://vue-bits.dev/r/LightRays.json Animated line wave pattern with colorful warped distortion.
npx shadcn@latest add https://vue-bits.dev/r/LineWaves.json Liquid metallic chrome shader with flowing reflective surface.
npx shadcn@latest add https://vue-bits.dev/r/LiquidChrome.json Interactive liquid shader with flowing distortion and customizable colors.
npx shadcn@latest add https://vue-bits.dev/r/LiquidEther.json Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.
npx shadcn@latest add https://vue-bits.dev/r/LogoLoop.json Interactive bento grid tiles expand + animate with various options.
npx shadcn@latest add https://vue-bits.dev/r/MagicBento.json Interactive magic rings effect with customizable parameters.
npx shadcn@latest add https://vue-bits.dev/r/MagicRings.json Elements magnetically ease toward the cursor then settle back with spring physics.
npx shadcn@latest add https://vue-bits.dev/r/Magnet.json Animated field lines bend toward the cursor.
npx shadcn@latest add https://vue-bits.dev/r/MagnetLines.json Responsive masonry layout with animated reflow + gaps optimization.
npx shadcn@latest add https://vue-bits.dev/r/Masonry.json Liquid metaball blobs that merge and separate with smooth implicit surface animation.
npx shadcn@latest add https://vue-bits.dev/r/MetaBalls.json Liquid metallic paint shader which can be applied to SVG elements.
npx shadcn@latest add https://vue-bits.dev/r/MetallicPaint.json Interactive 3D model viewer with orbit zoom, parallax, hover rotation and lighting presets.
npx shadcn@latest add https://vue-bits.dev/r/ModelViewer.json Animated film grain / noise overlay adding subtle texture and motion.
npx shadcn@latest add https://vue-bits.dev/r/Noise.json Floating energy orb with customizable hover effect.
npx shadcn@latest add https://vue-bits.dev/r/Orb.json SVG Path customizable orbiting images effect
npx shadcn@latest add https://vue-bits.dev/r/OrbitImages.json Configurable particle system.
npx shadcn@latest add https://vue-bits.dev/r/Particles.json Minimal pill nav with sliding active highlight + smooth easing.
npx shadcn@latest add https://vue-bits.dev/r/PillNav.json Exploding pixel particle bursts with optional liquid postprocessing.
npx shadcn@latest add https://vue-bits.dev/r/PixelBlast.json Card content revealed through pixel expansion transition.
npx shadcn@latest add https://vue-bits.dev/r/PixelCard.json Falling pixelated snow effect with customizable density and speed.
npx shadcn@latest add https://vue-bits.dev/r/PixelSnow.json Pixelated cursor trail emitting fading squares with retro digital feel.
npx shadcn@latest add https://vue-bits.dev/r/PixelTrail.json Pixel dissolve transition for content reveal on hover.
npx shadcn@latest add https://vue-bits.dev/r/PixelTransition.json Organic plasma gradients swirl + morph with smooth turbulence.
npx shadcn@latest add https://vue-bits.dev/r/Plasma.json Raymarched plasma waves with dual-wave interference and OGL.
npx shadcn@latest add https://vue-bits.dev/r/PlasmaWave.json Rotating prism with configurable intensity, size, and colors.
npx shadcn@latest add https://vue-bits.dev/r/Prism.json Burst of light rays with controllable color, distortion, amount.
npx shadcn@latest add https://vue-bits.dev/r/PrismaticBurst.json Animated profile card glare with 3D hover effect.
npx shadcn@latest add https://vue-bits.dev/r/ProfileCard.json Radar sweep effect with concentric rings, radial spokes, and a rotating beam.
npx shadcn@latest add https://vue-bits.dev/r/Radar.json Metallic card with live webcam reflection and SVG displacement filter.
npx shadcn@latest add https://vue-bits.dev/r/ReflectiveCard.json Flowing responsive ribbons/cursor trail driven by physics and pointer motion.
npx shadcn@latest add https://vue-bits.dev/r/Ribbons.json A grid that continuously animates with a ripple effect.
npx shadcn@latest add https://vue-bits.dev/r/RippleGrid.json Cycles through multiple phrases with 3D rotate / flip transitions.
npx shadcn@latest add https://vue-bits.dev/r/RotatingText.json Detects cursor position and applies a distortion effect to text.
npx shadcn@latest add https://vue-bits.dev/r/ScrambleText.json Text gently floats / parallax shifts on scroll.
npx shadcn@latest add https://vue-bits.dev/r/ScrollFloat.json Text gently unblurs and reveals on scroll.
npx shadcn@latest add https://vue-bits.dev/r/ScrollReveal.json Overlapping card stack reveals on scroll with depth layering.
npx shadcn@latest add https://vue-bits.dev/r/ScrollStack.json Text marquee animatio - speed and distortion scale with user's scroll velocity.
npx shadcn@latest add https://vue-bits.dev/r/ScrollVelocity.json Morphing blurred geometric shape. The effect occurs on hover.
npx shadcn@latest add https://vue-bits.dev/r/ShapeBlur.json Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization.
npx shadcn@latest add https://vue-bits.dev/r/ShapeGrid.json Metallic sheen sweeps across text producing a reflective highlight.
npx shadcn@latest add https://vue-bits.dev/r/ShinyText.json Animated text reveal where characters shuffle before settling.
npx shadcn@latest add https://vue-bits.dev/r/Shuffle.json Animated light rays emanating from the side with customizable colors and speed.
npx shadcn@latest add https://vue-bits.dev/r/SideRays.json Smooth waves background with soft lighting.
npx shadcn@latest add https://vue-bits.dev/r/Silk.json Soft aurora borealis shader with 3D Perlin noise and cosine gradient palettes.
npx shadcn@latest add https://vue-bits.dev/r/SoftAurora.json Liquid splash burst at cursor with curling ripples and waves.
npx shadcn@latest add https://vue-bits.dev/r/SplashCursor.json Splits text into characters / words for staggered entrance animation.
npx shadcn@latest add https://vue-bits.dev/r/SplitText.json Dynamic spotlight follows cursor casting gradient illumination.
npx shadcn@latest add https://vue-bits.dev/r/SpotlightCard.json Layered stack with swipe animations, autoplay and smooth transitions.
npx shadcn@latest add https://vue-bits.dev/r/Stack.json Menu with staggered item animations and smooth transitions on open/close.
npx shadcn@latest add https://vue-bits.dev/r/StaggeredMenu.json Animated star / sparkle border orbiting content with twinkle pulses.
npx shadcn@latest add https://vue-bits.dev/r/StarBorder.json Animated multi-step progress indicator with active state transitions.
npx shadcn@latest add https://vue-bits.dev/r/Stepper.json Sticker corner lift + peel interaction using 3D transform and shadow depth.
npx shadcn@latest add https://vue-bits.dev/r/StickerPeel.json Glowing ribbon-like strands that ripple and weave across a transparent canvas.
npx shadcn@latest add https://vue-bits.dev/r/Strands.json A cursor follow animation with 4 corners that lock onto targets.
npx shadcn@latest add https://vue-bits.dev/r/TargetCursor.json Make any text element follow your cursor, leaving a trail of copies behind it.
npx shadcn@latest add https://vue-bits.dev/r/TextCursor.json Characters scale / warp interactively based on pointer pressure zone.
npx shadcn@latest add https://vue-bits.dev/r/TextPressure.json Typewriter effect with blinking cursor and adjustable typing cadence.
npx shadcn@latest add https://vue-bits.dev/r/TextType.json Animated pattern of lines forming a fabric-like motion.
npx shadcn@latest add https://vue-bits.dev/r/Threads.json 3D perspective tilt card reacting to pointer.
npx shadcn@latest add https://vue-bits.dev/r/TiltedCard.json Applies dynamic blur / clarity based over a series of words in order.
npx shadcn@latest add https://vue-bits.dev/r/TrueFocus.json Letter styling changes continuously with pointer distance mapping.
npx shadcn@latest add https://vue-bits.dev/r/VariableProximity.json Layered lines that form smooth wave patterns with animation.
npx shadcn@latest add https://vue-bits.dev/r/Waves.json