---
name: "@vue-bits"
slug: "vue-bits"
description: "An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces."
category: "Animated components"
tags: ["animation", "backgrounds", "buttons", "cards", "dashboard", "forms", "glassmorphism", "icons", "loaders", "media", "navigation", "pro-available", "retro"]
framework: "vue"
license: null
author: null
website: "https://vue-bits.dev"
github: null
registry: "https://vue-bits.dev/r/registry.json"
pro: true
pro_url: "https://vue-bits.dev/pricing"
github_stars: null
component_count: 201
generated_at: "2026-10-27T06:34:08.542Z"
---

# @vue-bits

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

## Links

- Website: https://vue-bits.dev
- Registry JSON: https://vue-bits.dev/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/vue-bits
- This file: https://sh4dcn.netlify.app/md/vue-bits.md
- Pro / pricing: https://vue-bits.dev/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
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
# fetch the raw registry index
curl -s https://vue-bits.dev/r/registry.json
```

## Components (201)

| name | type | description | install |
| --- | --- | --- | --- |
| AccordionGallery | registry:component | Panels expand on hover or focus, revealing parallax imagery and captions. | `npx shadcn@latest add https://vue-bits.dev/r/AccordionGallery.json` |
| AcidSquares | registry:component | A crystalline corridor of stacked squares receding into depth. | `npx shadcn@latest add https://vue-bits.dev/r/AcidSquares.json` |
| AeroShards | registry: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 | registry: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 | registry:component | List items enter with staggered motion variants for polished reveals. | `npx shadcn@latest add https://vue-bits.dev/r/AnimatedList.json` |
| Antigravity | registry: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 | registry:component | Renders text with an animated ASCII background for a retro feel. | `npx shadcn@latest add https://vue-bits.dev/r/ASCIIText.json` |
| Aurora | registry:component | Flowing aurora gradient background. | `npx shadcn@latest add https://vue-bits.dev/r/Aurora.json` |
| Balatro | registry:component | The balatro shader, fully customizalbe and interactive. | `npx shadcn@latest add https://vue-bits.dev/r/Balatro.json` |
| Ballpit | registry:component | Physics ball pit simulation with bouncing colorful spheres. | `npx shadcn@latest add https://vue-bits.dev/r/Ballpit.json` |
| Beams | registry:component | Crossing animated ribbons with customizable properties. | `npx shadcn@latest add https://vue-bits.dev/r/Beams.json` |
| BellToggle | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | Cards bounce that bounce in on mount. | `npx shadcn@latest add https://vue-bits.dev/r/BounceCards.json` |
| BranchedMenu | registry: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 | registry:component | Floating circular expanding menu with staggered item reveal. | `npx shadcn@latest add https://vue-bits.dev/r/BubbleMenu.json` |
| CallChip | registry: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 | registry:component | Expandable navigation bar with card panels revealing nested links. | `npx shadcn@latest add https://vue-bits.dev/r/CardNav.json` |
| CardSwap | registry:component | Cards animate position swapping with smooth layout transitions. | `npx shadcn@latest add https://vue-bits.dev/r/CardSwap.json` |
| Carousel | registry:component | Responsive carousel with touch gestures, looping and transitions. | `npx shadcn@latest add https://vue-bits.dev/r/Carousel.json` |
| ChromaGrid | registry: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 | registry:component | Circular orbit gallery rotating images. | `npx shadcn@latest add https://vue-bits.dev/r/CircularGallery.json` |
| CircularText | registry:component | Layouts characters around a circle with optional rotation animation. | `npx shadcn@latest add https://vue-bits.dev/r/CircularText.json` |
| ClickSpark | registry:component | Creates particle spark bursts at click position. | `npx shadcn@latest add https://vue-bits.dev/r/ClickSpark.json` |
| CodeSlots | registry: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 | registry:component | Vibrant color bends with smooth flowing animation. | `npx shadcn@latest add https://vue-bits.dev/r/ColorBends.json` |
| CometDial | registry: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 | registry:component | Flexible animated counter supporting increments + easing. | `npx shadcn@latest add https://vue-bits.dev/r/Counter.json` |
| CountUp | registry:component | Animated number counter supporting formatting and decimals. | `npx shadcn@latest add https://vue-bits.dev/r/CountUp.json` |
| Crosshair | registry:component | Custom crosshair cursor with tracking, and link hover effects. | `npx shadcn@latest add https://vue-bits.dev/r/Crosshair.json` |
| CRTWarp | registry: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 | registry:component | 3D rotating cube cluster. Supports auto-rotation or hover interaction. | `npx shadcn@latest add https://vue-bits.dev/r/Cubes.json` |
| CursorGrid | registry: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 | registry: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 | registry:component | Flowing looping text path along a customizable curve with drag interaction. | `npx shadcn@latest add https://vue-bits.dev/r/CurvedLoop.json` |
| DarkVeil | registry:component | Subtle dark background with a smooth animation and postprocessing. | `npx shadcn@latest add https://vue-bits.dev/r/DarkVeil.json` |
| DecayCard | registry:component | Hover parallax effect that disintegrates the content of a card. | `npx shadcn@latest add https://vue-bits.dev/r/DecayCard.json` |
| DecryptedText | registry:component | Hacker-style decryption cycling random glyphs until resolving to real text. | `npx shadcn@latest add https://vue-bits.dev/r/DecryptedText.json` |
| DepthCarousel | registry: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 | registry:component | Layered extruded type with parallax that shifts against the pointer. | `npx shadcn@latest add https://vue-bits.dev/r/DepthText.json` |
| Dither | registry:component | Retro dithered noise shader background. | `npx shadcn@latest add https://vue-bits.dev/r/Dither.json` |
| DitherVeil | registry: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 | registry:component | macOS style magnifying dock with proximity scaling of icons. | `npx shadcn@latest add https://vue-bits.dev/r/Dock.json` |
| DodgeField | registry: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 | registry:component | Immersive 3D dome gallery projecting images on a hemispheric surface. | `npx shadcn@latest add https://vue-bits.dev/r/DomeGallery.json` |
| DotField | registry:component | Interactive dot grid with cursor bulge, glow, sparkle, and wave effects. | `npx shadcn@latest add https://vue-bits.dev/r/DotField.json` |
| DotGrid | registry:component | Animated dot grid with cursor interactions. | `npx shadcn@latest add https://vue-bits.dev/r/DotGrid.json` |
| DriftWall | registry:component | An endless perspective wall of tiles drifting past, lifting on hover. | `npx shadcn@latest add https://vue-bits.dev/r/DriftWall.json` |
| EchoText | registry: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 | registry: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 | registry:component | Slider handle stretches elastically then snaps with spring physics. | `npx shadcn@latest add https://vue-bits.dev/r/ElasticSlider.json` |
| ElectricBorder | registry:component | Jittery electric energy border with animated arcs, glow and adjustable intensity. | `npx shadcn@latest add https://vue-bits.dev/r/ElectricBorder.json` |
| ElectricLogo | registry: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 | registry: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 | registry:component | Simple directional fade / slide entrance / exit wrapper with threshold-based activation. | `npx shadcn@latest add https://vue-bits.dev/r/FadeContent.json` |
| FallingText | registry:component | Characters fall with gravity + bounce creating a playful entrance. | `npx shadcn@latest add https://vue-bits.dev/r/FallingText.json` |
| FaultyTerminal | registry:component | Terminal CRT scanline squares effect with flicker + noise. | `npx shadcn@latest add https://vue-bits.dev/r/FaultyTerminal.json` |
| Ferrofluid | registry: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 | registry: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 | registry: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 | registry:component | 3D floating lines that react to cursor movement. | `npx shadcn@latest add https://vue-bits.dev/r/FloatingLines.json` |
| FlowingMenu | registry:component | Liquid flowing active indicator glides between menu items. | `npx shadcn@latest add https://vue-bits.dev/r/FlowingMenu.json` |
| FlyingPosters | registry:component | 3D posters rotate on scroll infinitely. | `npx shadcn@latest add https://vue-bits.dev/r/FlyingPosters.json` |
| Folder | registry:component | Interactive folder opens to reveal nested content smooth motion. | `npx shadcn@latest add https://vue-bits.dev/r/Folder.json` |
| FolderFloat | registry: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 | registry:component | Lines unfold into place like creased paper opening flat. | `npx shadcn@latest add https://vue-bits.dev/r/FoldText.json` |
| FuseButton | registry: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 | registry:component | Vibrating fuzzy text with controllable hover intensity. | `npx shadcn@latest add https://vue-bits.dev/r/FuzzyText.json` |
| Galaxy | registry:component | Parallax realistic starfield with pointer interactions. | `npx shadcn@latest add https://vue-bits.dev/r/Galaxy.json` |
| GhostCursor | registry: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 | registry: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 | registry:component | Adds a realistic moving glare highlight on hover over any element. | `npx shadcn@latest add https://vue-bits.dev/r/GlareHover.json` |
| GlassIcons | registry:component | Icon set styled with frosted glass blur. | `npx shadcn@latest add https://vue-bits.dev/r/GlassIcons.json` |
| GlassSurface | registry:component | Advanced Apple-style glass surface with real-time distortion + lighting. | `npx shadcn@latest add https://vue-bits.dev/r/GlassSurface.json` |
| GlideSelect | registry: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 | registry:component | RGB split and distortion glitch effect with jitter effects. | `npx shadcn@latest add https://vue-bits.dev/r/GlitchText.json` |
| GlowCursor | registry: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 | registry:component | Navigation indicator morphs with gooey blob transitions between items. | `npx shadcn@latest add https://vue-bits.dev/r/GooeyNav.json` |
| GradientBlinds | registry:component | Layered gradient blinds with spotlight and noise distortion. | `npx shadcn@latest add https://vue-bits.dev/r/GradientBlinds.json` |
| GradientText | registry:component | Animated gradient sweep across live text with speed and color control. | `npx shadcn@latest add https://vue-bits.dev/r/GradientText.json` |
| GradientWaves | registry:component | Raymarched sine waves rolling toward a soft, hazy horizon. | `npx shadcn@latest add https://vue-bits.dev/r/GradientWaves.json` |
| GradualBlur | registry: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 | registry:component | Grainy gradient swirls with soft wave distortion. | `npx shadcn@latest add https://vue-bits.dev/r/Grainient.json` |
| GridDistortion | registry:component | Warped grid mesh distorts smoothly reacting to cursor. | `npx shadcn@latest add https://vue-bits.dev/r/GridDistortion.json` |
| GridMotion | registry:component | Perspective moving grid lines based on cusror position. | `npx shadcn@latest add https://vue-bits.dev/r/GridMotion.json` |
| GridScan | registry:component | Animated grid room 3D scan effect and cool interactions. | `npx shadcn@latest add https://vue-bits.dev/r/GridScan.json` |
| HalftoneReveal | registry: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 | registry: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 | registry:component | Animated lines continuously moving to simulate hyperspace travel on click hold. | `npx shadcn@latest add https://vue-bits.dev/r/Hyperspeed.json` |
| ImageTrail | registry:component | Cursor-based image trail with several built-in variants. | `npx shadcn@latest add https://vue-bits.dev/r/ImageTrail.json` |
| InfiniteMenu | registry:component | Horizontally looping menu effect that scrolls endlessly with seamless wrap. | `npx shadcn@latest add https://vue-bits.dev/r/InfiniteMenu.json` |
| InfiniteSpiral | registry: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 | registry:component | Slick iridescent shader with shifting waves. | `npx shadcn@latest add https://vue-bits.dev/r/Iridescence.json` |
| JellyRadio | registry: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 | registry:component | Dynamic laser light that flows onto a surface, customizable effect. | `npx shadcn@latest add https://vue-bits.dev/r/LaserFlow.json` |
| LatticeLoader | registry: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 | registry:component | Matrix style letter animation. | `npx shadcn@latest add https://vue-bits.dev/r/LetterGlitch.json` |
| Lightfall | registry: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 | registry:component | Procedural lightning bolts with branching and glow flicker. | `npx shadcn@latest add https://vue-bits.dev/r/Lightning.json` |
| LightPillar | registry:component | Vertical pillar of light with glow effects. | `npx shadcn@latest add https://vue-bits.dev/r/LightPillar.json` |
| LightRays | registry:component | Volumetric light rays/beams with customizable direction. | `npx shadcn@latest add https://vue-bits.dev/r/LightRays.json` |
| LightTunnel | registry:component | A radial fibre-optic tunnel with light pulses racing into depth. | `npx shadcn@latest add https://vue-bits.dev/r/LightTunnel.json` |
| LineSidebar | registry: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 | registry:component | Animated line wave pattern with colorful warped distortion. | `npx shadcn@latest add https://vue-bits.dev/r/LineWaves.json` |
| LiquidChrome | registry:component | Liquid metallic chrome shader with flowing reflective surface. | `npx shadcn@latest add https://vue-bits.dev/r/LiquidChrome.json` |
| LiquidEther | registry:component | Interactive liquid shader with flowing distortion and customizable colors. | `npx shadcn@latest add https://vue-bits.dev/r/LiquidEther.json` |
| LogoLoop | registry: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 | registry:component | Interactive bento grid tiles expand + animate with various options. | `npx shadcn@latest add https://vue-bits.dev/r/MagicBento.json` |
| MagicRings | registry:component | Interactive magic rings effect with customizable parameters. | `npx shadcn@latest add https://vue-bits.dev/r/MagicRings.json` |
| Magnet | registry: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 | registry:component | Animated field lines bend toward the cursor. | `npx shadcn@latest add https://vue-bits.dev/r/MagnetLines.json` |
| MaskedHeading | registry: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 | registry:component | Responsive masonry layout with animated reflow + gaps optimization. | `npx shadcn@latest add https://vue-bits.dev/r/Masonry.json` |
| MetaBalls | registry: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 | registry:component | Liquid metallic paint shader which can be applied to SVG elements. | `npx shadcn@latest add https://vue-bits.dev/r/MetallicPaint.json` |
| MicroSlats | registry: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 | registry: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 | registry:component | Swirling caustic plasma filaments with molten, white-hot cores. | `npx shadcn@latest add https://vue-bits.dev/r/MoltenMetal.json` |
| MorphSlider | registry:component | WebGL slider that melts between images with a displacement transition. | `npx shadcn@latest add https://vue-bits.dev/r/MorphSlider.json` |
| Noise | registry:component | Animated film grain / noise overlay adding subtle texture and motion. | `npx shadcn@latest add https://vue-bits.dev/r/Noise.json` |
| OptionWheel | registry: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 | registry:component | Floating energy orb with customizable hover effect. | `npx shadcn@latest add https://vue-bits.dev/r/Orb.json` |
| OrbitImages | registry:component | SVG Path customizable orbiting images effect | `npx shadcn@latest add https://vue-bits.dev/r/OrbitImages.json` |
| PaperCrumple | registry: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 | registry:component | Configurable particle system. | `npx shadcn@latest add https://vue-bits.dev/r/Particles.json` |
| ParticleText | registry:component | Text assembles from drifting particles that scatter and reform on demand. | `npx shadcn@latest add https://vue-bits.dev/r/ParticleText.json` |
| PeekRating | registry: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 | registry:component | Minimal pill nav with sliding active highlight + smooth easing. | `npx shadcn@latest add https://vue-bits.dev/r/PillNav.json` |
| PixelBlast | registry:component | Exploding pixel particle bursts with optional liquid postprocessing. | `npx shadcn@latest add https://vue-bits.dev/r/PixelBlast.json` |
| PixelCard | registry:component | Card content revealed through pixel expansion transition. | `npx shadcn@latest add https://vue-bits.dev/r/PixelCard.json` |
| PixelSwap | registry: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 | registry:component | Pixelated cursor trail emitting fading squares with retro digital feel. | `npx shadcn@latest add https://vue-bits.dev/r/PixelTrail.json` |
| PixelTransition | registry:component | Pixel dissolve transition for content reveal on hover. | `npx shadcn@latest add https://vue-bits.dev/r/PixelTransition.json` |
| Plasma | registry:component | Organic plasma gradients swirl + morph with smooth turbulence. | `npx shadcn@latest add https://vue-bits.dev/r/Plasma.json` |
| PlasmaWave | registry:component | Raymarched plasma waves with dual-wave interference and OGL. | `npx shadcn@latest add https://vue-bits.dev/r/PlasmaWave.json` |
| Prism | registry:component | Rotating prism with configurable intensity, size, and colors. | `npx shadcn@latest add https://vue-bits.dev/r/Prism.json` |
| PrismaticBurst | registry:component | Burst of light rays with controllable color, distortion, amount. | `npx shadcn@latest add https://vue-bits.dev/r/PrismaticBurst.json` |
| ProfileCard | registry:component | Animated profile card glare with 3D hover effect. | `npx shadcn@latest add https://vue-bits.dev/r/ProfileCard.json` |
| PromptBar | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | Metallic card with live webcam reflection and SVG displacement filter. | `npx shadcn@latest add https://vue-bits.dev/r/ReflectiveCard.json` |
| Ribbons | registry:component | Flowing responsive ribbons/cursor trail driven by physics and pointer motion. | `npx shadcn@latest add https://vue-bits.dev/r/Ribbons.json` |
| RippleDistortion | registry: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 | registry:component | A grid that continuously animates with a ripple effect. | `npx shadcn@latest add https://vue-bits.dev/r/RippleGrid.json` |
| RotatingText | registry:component | Cycles through multiple phrases with 3D rotate / flip transitions. | `npx shadcn@latest add https://vue-bits.dev/r/RotatingText.json` |
| RubberSegment | registry: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 | registry: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 | registry:component | Detects cursor position and applies a distortion effect to text. | `npx shadcn@latest add https://vue-bits.dev/r/ScrambleText.json` |
| ScrollExpand | registry: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 | registry:component | Text gently floats / parallax shifts on scroll. | `npx shadcn@latest add https://vue-bits.dev/r/ScrollFloat.json` |
| ScrollReveal | registry:component | Text gently unblurs and reveals on scroll. | `npx shadcn@latest add https://vue-bits.dev/r/ScrollReveal.json` |
| ScrollStack | registry:component | Overlapping card stack reveals on scroll with depth layering. | `npx shadcn@latest add https://vue-bits.dev/r/ScrollStack.json` |
| ScrollVelocity | registry: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 | registry: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 | registry:component | Morphing blurred geometric shape. The effect occurs on hover. | `npx shadcn@latest add https://vue-bits.dev/r/ShapeBlur.json` |
| ShapeGrid | registry:component | Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization. | `npx shadcn@latest add https://vue-bits.dev/r/ShapeGrid.json` |
| ShapeWaves | registry: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 | registry:component | Metallic sheen sweeps across text producing a reflective highlight. | `npx shadcn@latest add https://vue-bits.dev/r/ShinyText.json` |
| Shredder | registry: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 | registry:component | Animated text reveal where characters shuffle before settling. | `npx shadcn@latest add https://vue-bits.dev/r/Shuffle.json` |
| SideRays | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | Liquid splash burst at cursor with curling ripples and waves. | `npx shadcn@latest add https://vue-bits.dev/r/SplashCursor.json` |
| SplitFlapText | registry: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 | registry:component | Splits text into characters / words for staggered entrance animation. | `npx shadcn@latest add https://vue-bits.dev/r/SplitText.json` |
| SpotlightCard | registry:component | Dynamic spotlight follows cursor casting gradient illumination. | `npx shadcn@latest add https://vue-bits.dev/r/SpotlightCard.json` |
| SpringCheck | registry: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 | registry: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 | registry:component | Layered stack with swipe animations, autoplay and smooth transitions. | `npx shadcn@latest add https://vue-bits.dev/r/Stack.json` |
| StaggeredMenu | registry:component | Menu with staggered item animations and smooth transitions on open/close. | `npx shadcn@latest add https://vue-bits.dev/r/StaggeredMenu.json` |
| StarBorder | registry:component | Animated star / sparkle border orbiting content with twinkle pulses. | `npx shadcn@latest add https://vue-bits.dev/r/StarBorder.json` |
| StatusMark | registry: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 | registry:component | Animated multi-step progress indicator with active state transitions. | `npx shadcn@latest add https://vue-bits.dev/r/Stepper.json` |
| StickerPeel | registry:component | Sticker corner lift + peel interaction using 3D transform and shadow depth. | `npx shadcn@latest add https://vue-bits.dev/r/StickerPeel.json` |
| Strands | registry: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 | registry:component | Outlined letterforms draw themselves on, then flood with fill. | `npx shadcn@latest add https://vue-bits.dev/r/StrokeText.json` |
| SwarmCursor | registry: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 | registry: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 | registry: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 | registry:component | A cursor follow animation with 4 corners that lock onto targets. | `npx shadcn@latest add https://vue-bits.dev/r/TargetCursor.json` |
| TearTicket | registry: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 | registry: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 | registry: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 | registry:component | A seamless text marquee that flows along curved SVG paths. | `npx shadcn@latest add https://vue-bits.dev/r/TextLoop.json` |
| TextPressure | registry:component | Characters scale / warp interactively based on pointer pressure zone. | `npx shadcn@latest add https://vue-bits.dev/r/TextPressure.json` |
| TextType | registry:component | Typewriter effect with blinking cursor and adjustable typing cadence. | `npx shadcn@latest add https://vue-bits.dev/r/TextType.json` |
| ThoughtLine | registry: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 | registry:component | 3D perspective tilt card reacting to pointer. | `npx shadcn@latest add https://vue-bits.dev/r/TiltedCard.json` |
| Topography | registry:component | A living contour map with glowing, elevation-tinted lines. | `npx shadcn@latest add https://vue-bits.dev/r/Topography.json` |
| TrueFocus | registry: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 | registry:component | Letter styling changes continuously with pointer distance mapping. | `npx shadcn@latest add https://vue-bits.dev/r/VariableProximity.json` |
| VoicePill | registry: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 | registry:component | WebGL warp that bends and refracts the text around the pointer. | `npx shadcn@latest add https://vue-bits.dev/r/WarpText.json` |
| WebThreads | registry:component | Glowing sine threads woven through a luminous convergence point. | `npx shadcn@latest add https://vue-bits.dev/r/WebThreads.json` |

## For AI agents

```text
You are adding components from @vue-bits to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/vue-bits.md) for the component list.
2. Fetch the machine-readable index: https://vue-bits.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: vue-bits).
```