sh4dcnv2 · atlas
← libraries

@vue-bits

An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.

60 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://vue-bits.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://vue-bits.dev/r/registry.json
bun bunx shadcn@latest add https://vue-bits.dev/r/registry.json
fetch registry curl -s https://vue-bits.dev/r/registry.json

Components

60 total
AnimatedContent component

Wrapper 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
AnimatedList component

List items enter with staggered motion variants for polished reveals.

npx shadcn@latest add https://vue-bits.dev/r/AnimatedList.json
Antigravity component

3D antigravity particle field that repels from the cursor with smooth motion.

npx shadcn@latest add https://vue-bits.dev/r/Antigravity.json
ASCIIText component

Renders text with an animated ASCII background for a retro feel.

npx shadcn@latest add https://vue-bits.dev/r/ASCIIText.json
Aurora component

Flowing aurora gradient background.

npx shadcn@latest add https://vue-bits.dev/r/Aurora.json
Balatro component

The balatro shader, fully customizalbe and interactive.

npx shadcn@latest add https://vue-bits.dev/r/Balatro.json
Ballpit component

Physics ball pit simulation with bouncing colorful spheres.

npx shadcn@latest add https://vue-bits.dev/r/Ballpit.json
Beams component

Crossing animated ribbons with customizable properties.

npx shadcn@latest add https://vue-bits.dev/r/Beams.json
BlobCursor component

Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.

npx shadcn@latest add https://vue-bits.dev/r/BlobCursor.json
BlurText component

Text starts blurred then crisply resolves for a soft-focus reveal effect.

npx shadcn@latest add https://vue-bits.dev/r/BlurText.json
BorderGlow component

Glowing mesh-gradient border that follows cursor direction and intensifies near edges.

npx shadcn@latest add https://vue-bits.dev/r/BorderGlow.json
BounceCards component

Cards bounce that bounce in on mount.

npx shadcn@latest add https://vue-bits.dev/r/BounceCards.json
BubbleMenu component

Floating circular expanding menu with staggered item reveal.

npx shadcn@latest add https://vue-bits.dev/r/BubbleMenu.json
CardNav component

Expandable navigation bar with card panels revealing nested links.

npx shadcn@latest add https://vue-bits.dev/r/CardNav.json
CardSwap component

Cards animate position swapping with smooth layout transitions.

npx shadcn@latest add https://vue-bits.dev/r/CardSwap.json
Carousel component

Responsive carousel with touch gestures, looping and transitions.

npx shadcn@latest add https://vue-bits.dev/r/Carousel.json
ChromaGrid component

A responsive grid of grayscale tiles. Hovering the grid reaveals their colors.

npx shadcn@latest add https://vue-bits.dev/r/ChromaGrid.json
CircularGallery component

Circular orbit gallery rotating images.

npx shadcn@latest add https://vue-bits.dev/r/CircularGallery.json
CircularText component

Layouts characters around a circle with optional rotation animation.

npx shadcn@latest add https://vue-bits.dev/r/CircularText.json
ClickSpark component

Creates particle spark bursts at click position.

npx shadcn@latest add https://vue-bits.dev/r/ClickSpark.json
ColorBends component

Vibrant color bends with smooth flowing animation.

npx shadcn@latest add https://vue-bits.dev/r/ColorBends.json
Counter component

Flexible animated counter supporting increments + easing.

npx shadcn@latest add https://vue-bits.dev/r/Counter.json
CountUp component

Animated number counter supporting formatting and decimals.

npx shadcn@latest add https://vue-bits.dev/r/CountUp.json
Crosshair component

Custom crosshair cursor with tracking, and link hover effects.

npx shadcn@latest add https://vue-bits.dev/r/Crosshair.json
Cubes component

3D rotating cube cluster. Supports auto-rotation or hover interaction.

npx shadcn@latest add https://vue-bits.dev/r/Cubes.json
CurvedLoop component

Flowing looping text path along a customizable curve with drag interaction.

npx shadcn@latest add https://vue-bits.dev/r/CurvedLoop.json
DarkVeil component

Subtle dark background with a smooth animation and postprocessing.

npx shadcn@latest add https://vue-bits.dev/r/DarkVeil.json
DecayCard component

Hover parallax effect that disintegrates the content of a card.

npx shadcn@latest add https://vue-bits.dev/r/DecayCard.json
DecryptedText component

Hacker-style decryption cycling random glyphs until resolving to real text.

npx shadcn@latest add https://vue-bits.dev/r/DecryptedText.json
Dither component

Retro dithered noise shader background.

npx shadcn@latest add https://vue-bits.dev/r/Dither.json
Dock component

macOS style magnifying dock with proximity scaling of icons.

npx shadcn@latest add https://vue-bits.dev/r/Dock.json
DomeGallery component

Immersive 3D dome gallery projecting images on a hemispheric surface.

npx shadcn@latest add https://vue-bits.dev/r/DomeGallery.json
DotField component

Interactive dot grid with cursor bulge, glow, sparkle, and wave effects.

npx shadcn@latest add https://vue-bits.dev/r/DotField.json
DotGrid component

Animated dot grid with cursor interactions.

npx shadcn@latest add https://vue-bits.dev/r/DotGrid.json
ElasticSlider component

Slider handle stretches elastically then snaps with spring physics.

npx shadcn@latest add https://vue-bits.dev/r/ElasticSlider.json
ElectricBorder component

Jittery electric energy border with animated arcs, glow and adjustable intensity.

npx shadcn@latest add https://vue-bits.dev/r/ElectricBorder.json
EvilEye component

Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow.

npx shadcn@latest add https://vue-bits.dev/r/EvilEye.json
FadeContent component

Simple directional fade / slide entrance / exit wrapper with threshold-based activation.

npx shadcn@latest add https://vue-bits.dev/r/FadeContent.json
FallingText component

Characters fall with gravity + bounce creating a playful entrance.

npx shadcn@latest add https://vue-bits.dev/r/FallingText.json
FaultyTerminal component

Terminal CRT scanline squares effect with flicker + noise.

npx shadcn@latest add https://vue-bits.dev/r/FaultyTerminal.json
Ferrofluid component

A churning magnetic fluid traced by glowing contour lines, with a cursor magnet.

npx shadcn@latest add https://vue-bits.dev/r/Ferrofluid.json
FloatingLines component

3D floating lines that react to cursor movement.

npx shadcn@latest add https://vue-bits.dev/r/FloatingLines.json
FlowingMenu component

Liquid flowing active indicator glides between menu items.

npx shadcn@latest add https://vue-bits.dev/r/FlowingMenu.json
FlyingPosters component

3D posters rotate on scroll infinitely.

npx shadcn@latest add https://vue-bits.dev/r/FlyingPosters.json
Folder component

Interactive folder opens to reveal nested content smooth motion.

npx shadcn@latest add https://vue-bits.dev/r/Folder.json
FuzzyText component

Vibrating fuzzy text with controllable hover intensity.

npx shadcn@latest add https://vue-bits.dev/r/FuzzyText.json
Galaxy component

Parallax realistic starfield with pointer interactions.

npx shadcn@latest add https://vue-bits.dev/r/Galaxy.json
GhostCursor component

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
GlareHover component

Adds a realistic moving glare highlight on hover over any element.

npx shadcn@latest add https://vue-bits.dev/r/GlareHover.json
GlassIcons component

Icon set styled with frosted glass blur.

npx shadcn@latest add https://vue-bits.dev/r/GlassIcons.json
GlassSurface component

Advanced Apple-style glass surface with real-time distortion + lighting.

npx shadcn@latest add https://vue-bits.dev/r/GlassSurface.json
GlitchText component

RGB split and distortion glitch effect with jitter effects.

npx shadcn@latest add https://vue-bits.dev/r/GlitchText.json
GooeyNav component

Navigation indicator morphs with gooey blob transitions between items.

npx shadcn@latest add https://vue-bits.dev/r/GooeyNav.json
GradientBlinds component

Layered gradient blinds with spotlight and noise distortion.

npx shadcn@latest add https://vue-bits.dev/r/GradientBlinds.json
GradientText component

Animated gradient sweep across live text with speed and color control.

npx shadcn@latest add https://vue-bits.dev/r/GradientText.json
GradualBlur component

Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.

npx shadcn@latest add https://vue-bits.dev/r/GradualBlur.json
Grainient component

Grainy gradient swirls with soft wave distortion.

npx shadcn@latest add https://vue-bits.dev/r/Grainient.json
GridDistortion component

Warped grid mesh distorts smoothly reacting to cursor.

npx shadcn@latest add https://vue-bits.dev/r/GridDistortion.json
GridMotion component

Perspective moving grid lines based on cusror position.

npx shadcn@latest add https://vue-bits.dev/r/GridMotion.json
GridScan component

Animated grid room 3D scan effect and cool interactions.

npx shadcn@latest add https://vue-bits.dev/r/GridScan.json