sh4dcnv2 · atlas
← libraries

@vue-bits

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

201 components pro available vue 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

201 total
AccordionGallery component

Panels expand on hover or focus, revealing parallax imagery and captions.

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

A crystalline corridor of stacked squares receding into depth.

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

A GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer interactions.

npx shadcn@latest add https://vue-bits.dev/r/AeroShards.json
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
BellToggle component

Pill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and the pill unfurls to the longer label throu…

npx shadcn@latest add https://vue-bits.dev/r/BellToggle.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
BranchedMenu component

Collapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that travels down the trunk and around the curve to …

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

Floating circular expanding menu with staggered item reveal.

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

Inline tool-call chip whose fill wipes across while a live ms counter ticks, completing with a green wash on success or stopping short and shaking red with a r…

npx shadcn@latest add https://vue-bits.dev/r/CallChip.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
CodeSlots component

One-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on one spring: the fill swells from the cen…

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

Vibrant color bends with smooth flowing animation.

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

Tick-ring dial you flick by angle: the reading launches on a spring and a velocity-driven comet streaks behind the lit head, trailing the direction of travel a…

npx shadcn@latest add https://vue-bits.dev/r/CometDial.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
CRTWarp component

Full-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.

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

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

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

Canvas grid whose cells light up around the cursor with configurable radius, falloff and click pulses.

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

Arc-bent input bar with text, caret and submit button all following the curve.

npx shadcn@latest add https://vue-bits.dev/r/CurvedInput.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
DepthCarousel component

Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance.

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

Layered extruded type with parallax that shifts against the pointer.

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

Retro dithered noise shader background.

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

A photo printed as a 1-bit dither that the cursor burns through to full colour, leaving a trail that knits back cell by cell.

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

macOS style magnifying dock with proximity scaling of icons.

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

Wrapper that makes any child flee the pointer inside a bounded field, dodges once per approach, then relents after a few tries and glides home.

npx shadcn@latest add https://vue-bits.dev/r/DodgeField.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
DriftWall component

An endless perspective wall of tiles drifting past, lifting on hover.

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

Ghosted copies trail behind the text and settle into a single word.

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

Spring-mesh surface that stretches under the pointer and settles back with damped physics.

npx shadcn@latest add https://vue-bits.dev/r/ElasticMesh.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
ElectricLogo component

Turns any SVG or PNG into a living lightning outline, with flowing strands, arcs that leap off the edges and a charge that follows the cursor.

npx shadcn@latest add https://vue-bits.dev/r/ElectricLogo.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
FlexCarousel component

An infinite image row that flows through invisible liquid glass at its edges, with four bend presets, five entrances, a speed squeeze and click to focus.

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

Two-faced card that flips in 3D on a click, a drag or a flick, settling on a spring that carries your release velocity, with an optional cursor tilt, a sheen t…

npx shadcn@latest add https://vue-bits.dev/r/FlipCard.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
FolderFloat component

Folder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a floating cloud to pick…

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

Lines unfold into place like creased paper opening flat.

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

Action button whose done state carries its own undo on a burning fuse: press, the label crossfades to Undo, a hairline burns for the undo window, and Undo or E…

npx shadcn@latest add https://vue-bits.dev/r/FuseButton.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
GhostFibers component

A deep-blue recursive fiber field with luminous bands, radial twisting and soft atmospheric glow.

npx shadcn@latest add https://vue-bits.dev/r/GhostFibers.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
GlideSelect component

Select chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so re-entry slides from t…

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

RGB split and distortion glitch effect with jitter effects.

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

Shader-powered light trail that smoothly follows the pointer with customizable glow, color, taper and pulse.

npx shadcn@latest add https://vue-bits.dev/r/GlowCursor.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
GradientWaves component

Raymarched sine waves rolling toward a soft, hazy horizon.

npx shadcn@latest add https://vue-bits.dev/r/GradientWaves.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
HalftoneReveal component

Print-style halftone dot matrix that resolves into sharp content around the cursor.

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

Hold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label through a blur when the hold completes.

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

Animated lines continuously moving to simulate hyperspace travel on click hold.

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

Cursor-based image trail with several built-in variants.

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

Horizontally looping menu effect that scrolls endlessly with seamless wrap.

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

An endlessly looping 3D helix of images with customizable motion, depth, spacing and interaction.

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

Slick iridescent shader with shifting waves.

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

Radio group of labelled chips where the chosen one swells wide-then-tall on two springs and barges its neighbours outward with a travelling stagger, so a selec…

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

Dynamic laser light that flows onto a surface, customizable effect.

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

Inline agent-status row: a 3x3 or 4x4 lattice whose cells brighten in a phase-offset wave beside a verb and a live stopwatch, resolving into a check or a cross…

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

Matrix style letter animation.

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

Colorful light streaks raining down a glowing tunnel with a cursor light.

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

Procedural lightning bolts with branching and glow flicker.

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

Vertical pillar of light with glow effects.

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

Volumetric light rays/beams with customizable direction.

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

A radial fibre-optic tunnel with light pulses racing into depth.

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

Static list navigation with a cursor-proximity effect that shifts and highlights nearby items.

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

Animated line wave pattern with colorful warped distortion.

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

Liquid metallic chrome shader with flowing reflective surface.

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

Interactive liquid shader with flowing distortion and customizable colors.

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

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

Interactive bento grid tiles expand + animate with various options.

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

Interactive magic rings effect with customizable parameters.

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

Elements magnetically ease toward the cursor then settle back with spring physics.

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

Animated field lines bend toward the cursor.

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

A large headline with a drifting colour mesh or image showing through the glyphs, revealed word by word.

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

Responsive masonry layout with animated reflow + gaps optimization.

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

Liquid metaball blobs that merge and separate with smooth implicit surface animation.

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

Liquid metallic paint shader which can be applied to SVG elements.

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

A wall of tiny slats that becomes a rolling sea in perspective, with glinting crests, four presets, a real fluid the cursor stirs and an intro that rolls in fr…

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

Interactive 3D model viewer with orbit zoom, parallax, hover rotation and lighting presets.

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

Swirling caustic plasma filaments with molten, white-hot cores.

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

WebGL slider that melts between images with a displacement transition.

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

Animated film grain / noise overlay adding subtle texture and motion.

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

Curved option picker that spins via scroll, drag, or arrow keys, fading and tilting items away from the selection.

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

Floating energy orb with customizable hover effect.

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

SVG Path customizable orbiting images effect

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

An image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a crumpled ball, unfold it flat, or leave t…

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

Configurable particle system.

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

Text assembles from drifting particles that scatter and reform on demand.

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

Star rating you can try before you commit: sweeping the row lifts a trailing wave of stars up to the pointer while a tip hops along with the label; a click com…

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

Minimal pill nav with sliding active highlight + smooth easing.

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

Exploding pixel particle bursts with optional liquid postprocessing.

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

Card content revealed through pixel expansion transition.

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

Pixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and triggers.

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

Pixelated cursor trail emitting fading squares with retro digital feel.

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

Pixel dissolve transition for content reveal on hover.

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

Organic plasma gradients swirl + morph with smooth turbulence.

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

Raymarched plasma waves with dual-wave interference and OGL.

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

Rotating prism with configurable intensity, size, and colors.

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

Burst of light rays with controllable color, distortion, amount.

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

Animated profile card glare with 3D hover effect.

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

Chat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the moment there is somethin…

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

Like button that contracts to a dot, flips colour at its smallest frame and pulses back while the count swaps one glyph.

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

Radar sweep effect with concentric rings, radial spokes, and a rotating beam.

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

Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur, saturate, scale and …

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

Metallic card with live webcam reflection and SVG displacement filter.

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

Flowing responsive ribbons/cursor trail driven by physics and pointer motion.

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

Pointer-driven water displacement that warps content and leaves a decaying wake.

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

A grid that continuously animates with a ripple effect.

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

Cycles through multiple phrases with 3D rotate / flip transitions.

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

Segmented control with a rubber thumb: taps stretch it across the gap and squash it onto the target, and you can grab, drag and flick it between slots.

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

Retro CRT scanner background with sweep lines, chromatic aberration, and mouse interaction.

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

Detects cursor position and applies a distortion effect to text.

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

A rounded media frame that grows to full bleed as it scrolls through the viewport.

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

Text gently floats / parallax shifts on scroll.

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

Text gently unblurs and reveals on scroll.

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

Overlapping card stack reveals on scroll with depth layering.

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

Text marquee animatio - speed and distortion scale with user's scroll velocity.

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

Number chip you drag to scrub: the value follows the hand, pushes past the range on a rubber band, and a click without moving opens it for typing.

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

Morphing blurred geometric shape. The effect occurs on hover.

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

Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization.

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

A WebGPU field of triangles, circles and squares that brighten and grow along rolling waves, with an optional text cutout the waves flow around.

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

Metallic sheen sweeps across text producing a reflective highlight.

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

A list with a paper shredder at the bottom. Drag a row into the slit and the rollers tug it in, pull it through and cut it into strips that curl out underneath…

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

Animated text reveal where characters shuffle before settling.

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

Animated light rays emanating from the side with customizable colors and speed.

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

Slide-to-confirm handle that plants with a spinner while your action runs, unfurls into a done pill on success and springs home with a squash and shake on fail…

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

Send button you pull back like a slingshot: the band stretches, a power arc arms it, and releasing fires the action with the flick's velocity.

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

Tank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it slams full; optionally a vertical slider.

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

Glass button with a shader-driven specular rim light that sweeps around the edge and follows the cursor.

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

Liquid splash burst at cursor with curling ripples and waves.

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

Mechanical split-flap departure board that clacks through to each new phrase.

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

Splits text into characters / words for staggered entrance animation.

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

Dynamic spotlight follows cursor casting gradient illumination.

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

Checkbox row where a single spring fills the box, draws the tick, strikes the label and dims the words in one press.

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

Drag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the track end on a flick.

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

Layered stack with swipe animations, autoplay and smooth transitions.

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

Menu with staggered item animations and smooth transitions on open/close.

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

Animated star / sparkle border orbiting content with twinkle pulses.

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

A 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress arc, then draws a check or a cross, with a…

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

Animated multi-step progress indicator with active state transitions.

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

Sticker corner lift + peel interaction using 3D transform and shadow depth.

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

Glowing ribbon-like strands that ripple and weave across a transparent canvas.

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

Outlined letterforms draw themselves on, then flood with fill.

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

Flocking particle swarm that chases the pointer, jostles for space and drifts apart at rest.

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

List row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the action colour across the row.

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

Single toast that rises through its bottom edge, swipes down to dismiss on a flick or a distance, and burns a thin fuse for exactly its remaining time; hover p…

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

A cursor follow animation with 4 corners that lock onto targets.

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

Ticket whose perforated stub tears off by hand: paper bridges stretch into fibres and snap one by one from the far end, the torn edges are jagged and fit each …

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

A wordmark whose letters turn into dashed vector paths under the cursor. Grab any letter to drag it off the baseline and it springs back home.

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

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

A seamless text marquee that flows along curved SVG paths.

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

Characters scale / warp interactively based on pointer pressure zone.

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

Typewriter effect with blinking cursor and adjustable typing cadence.

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

Reasoning-trace header: a glyph and a label breathe beside a live clock while steps appear beneath, then the line settles on one beat into "Thought for 4.2s" t…

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

3D perspective tilt card reacting to pointer.

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

A living contour map with glowing, elevation-tinted lines.

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

Applies dynamic blur / clarity based over a series of words in order.

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

Letter styling changes continuously with pointer distance mapping.

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

Mic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or toggled, then relaxes back into the mic on relea…

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

WebGL warp that bends and refracts the text around the pointer.

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

Glowing sine threads woven through a luminous convergence point.

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