llms.txt
# React Bits
> React Bits is an open source collection of memorable UI elements - Components, Animations, Backgrounds, Text Animations, and Micro interactions - provided in four implementation variants: JavaScript + CSS, JavaScript + Tailwind, TypeScript + CSS, and TypeScript + Tailwind. Components are copy-friendly and installable via CLI (jsrepo or shadcn).
Important notes for agents:
- Components are organized by semantics first: UI Components, Animations, Backgrounds, Text Animations, Micro (small, satisfying micro-interactions such as switches, buttons and loaders).
- Each component has 4 variants. All variants are kept in sync when updated.
- Dependencies vary by component (e.g., gsap, motion, three, ogl). Always check and install dependencies before usage.
- Everything on reactbits.dev is free and open source. There is a separate paid library, React Bits Pro, covering page blocks, application UI, templates and agent skills - see the React Bits Pro sections below.
## Docs
- [Homepage](https://www.reactbits.dev): Landing page, quick presentation of the library, testimonials.
- [Introduction](https://www.reactbits.dev/get-started/introduction): Project mission and principles.
- [Installation](https://www.reactbits.dev/get-started/installation): Manual copy and CLI commands (jsrepo, shadcn).
- [MCP Setup](https://www.reactbits.dev/get-started/mcp): Set up a MCP server to help you with development.
- [Pro catalogue](https://www.reactbits.dev/pro): On-domain previews of React Bits Pro: components, blocks, app UI, templates, agent kit.
## CLI
- shadcn: `npx shadcn@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>`
- <LANG>: JS | TS; <STYLE>: CSS | TW
- Example: npx shadcn@latest add https://reactbits.dev/r/SplitText-JS-CSS
- jsrepo: `npx jsrepo@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>`
- <LANG>: JS | TS; <STYLE>: CSS | TW
- Example: npx jsrepo@latest add https://reactbits.dev/r/SplitText-JS-CSS
Notes:
- Component page URLs use kebab-case paths like /text-animations/split-text.
- CLI component identifiers use PascalCase, e.g. SplitText.
## Text Animations
- [ASCII Text](https://www.reactbits.dev/text-animations/ascii-text): Waving ASCII text that tilts toward the pointer, scrambles on hover and ripples on click. CLI: `ASCIIText`.
- [Blur Text](https://www.reactbits.dev/text-animations/blur-text): Text starts blurred then crisply resolves for a soft-focus reveal effect. CLI: `BlurText`.
- [Circular Text](https://www.reactbits.dev/text-animations/circular-text): Layouts characters around a circle with optional rotation animation. CLI: `CircularText`.
- [Count Up](https://www.reactbits.dev/text-animations/count-up): Animated number counter supporting formatting and decimals. CLI: `CountUp`.
- [Curved Loop](https://www.reactbits.dev/text-animations/curved-loop): Flowing looping text path along a customizable curve with drag interaction. CLI: `CurvedLoop`.
- [Decrypted Text](https://www.reactbits.dev/text-animations/decrypted-text): Hacker-style decryption cycling random glyphs until resolving to real text. CLI: `DecryptedText`.
- [Depth Text](https://www.reactbits.dev/text-animations/depth-text): Layered extruded type with parallax that shifts against the pointer. CLI: `DepthText`.
- [Echo Text](https://www.reactbits.dev/text-animations/echo-text): Ghosted copies trail behind the text and settle into a single word. CLI: `EchoText`.
- [Falling Text](https://www.reactbits.dev/text-animations/falling-text): Text that breaks apart and tumbles into a pile you can drag, throw and swipe, then flies back into place. CLI: `FallingText`.
- [Fold Text](https://www.reactbits.dev/text-animations/fold-text): Lines unfold into place like creased paper opening flat. CLI: `FoldText`.
- [Fuzzy Text](https://www.reactbits.dev/text-animations/fuzzy-text): Vibrating fuzzy text with controllable hover intensity. CLI: `FuzzyText`.
- [Glitch Text](https://www.reactbits.dev/text-animations/glitch-text): RGB split and distortion glitch effect with jitter effects. CLI: `GlitchText`.
- [Gradient Text](https://www.reactbits.dev/text-animations/gradient-text): Living gradients inside your text: a sliding sweep, a drifting mesh or a swinging conic fan. CLI: `GradientText`.
- [Masked Heading](https://www.reactbits.dev/text-animations/masked-heading): A headline with a drifting colour mesh or image showing through, revealed word by word. CLI: `MaskedHeading`.
- [Particle Text](https://www.reactbits.dev/text-animations/particle-text): Text assembles from drifting particles that scatter and reform on demand. CLI: `ParticleText`.
- [Rotating Text](https://www.reactbits.dev/text-animations/rotating-text): Cycles through multiple phrases with 3D rotate / flip transitions. CLI: `RotatingText`.
- [Scrambled Text](https://www.reactbits.dev/text-animations/scrambled-text): Detects cursor position and applies a distortion effect to text. CLI: `ScrambledText`.
- [Scroll Float](https://www.reactbits.dev/text-animations/scroll-float): Text gently floats / parallax shifts on scroll. CLI: `ScrollFloat`.
- [Scroll Reveal](https://www.reactbits.dev/text-animations/scroll-reveal): Text gently unblurs and reveals on scroll. CLI: `ScrollReveal`.
- [Scroll Velocity](https://www.reactbits.dev/text-animations/scroll-velocity): Text marquee animatio - speed and distortion scale with user's scroll velocity. CLI: `ScrollVelocity`.
- [Shiny Text](https://www.reactbits.dev/text-animations/shiny-text): A sheen of light that sweeps across text, from soft bands to chrome-like reflections. CLI: `ShinyText`.
- [Shuffle](https://www.reactbits.dev/text-animations/shuffle): Animated text reveal where characters shuffle before settling. CLI: `Shuffle`.
- [Split Flap Text](https://www.reactbits.dev/text-animations/split-flap-text): Mechanical split-flap departure board that clacks through to each new phrase. CLI: `SplitFlapText`.
- [Split Text](https://www.reactbits.dev/text-animations/split-text): Splits text into characters / words for staggered entrance animation. CLI: `SplitText`.
- [Stroke Text](https://www.reactbits.dev/text-animations/stroke-text): Outlined letterforms draw themselves on, then flood with fill. CLI: `StrokeText`.
- [Tech Text](https://www.reactbits.dev/text-animations/tech-text): A wordmark whose letters turn into dashed vector paths under the cursor. CLI: `TechText`.
- [Text Cursor](https://www.reactbits.dev/text-animations/text-cursor): Text or emoji that trails your cursor as stamped copies, a following chain or a ribbon of letters. CLI: `TextCursor`.
- [Text Loop](https://www.reactbits.dev/text-animations/text-loop): A seamless text marquee that flows along curved SVG paths. CLI: `TextLoop`.
- [Text Pressure](https://www.reactbits.dev/text-animations/text-pressure): Characters scale / warp interactively based on pointer pressure zone. CLI: `TextPressure`.
- [Text Type](https://www.reactbits.dev/text-animations/text-type): Typewriter effect with blinking cursor and adjustable typing cadence. CLI: `TextType`.
- [True Focus](https://www.reactbits.dev/text-animations/true-focus): Applies dynamic blur / clarity based over a series of words in order. CLI: `TrueFocus`.
- [Variable Proximity](https://www.reactbits.dev/text-animations/variable-proximity): Letter styling changes continuously with pointer distance mapping. CLI: `VariableProximity`.
- [Warp Text](https://www.reactbits.dev/text-animations/warp-text): WebGL warp that bends and refracts the text around the pointer. CLI: `WarpText`.
## Animations
- [Animated Content](https://www.reactbits.dev/animations/animated-content): Wrapper that animates its children in on scroll or mount, from any direction. CLI: `AnimatedContent`.
- [Antigravity](https://www.reactbits.dev/animations/antigravity): 3D antigravity particle field that repels from the cursor with smooth motion. CLI: `Antigravity`.
- [Blob Cursor](https://www.reactbits.dev/animations/blob-cursor): Liquid metal blob cursor that stretches, sloshes and bursts into droplets, in chrome, jelly, pearl or ink. CLI: `BlobCursor`.
- [Click Spark](https://www.reactbits.dev/animations/click-spark): Bursts of sparks at every click, as dashes, comets, dots or stars, that can spill around buttons. CLI: `ClickSpark`.
- [Crosshair](https://www.reactbits.dev/animations/crosshair): Crosshair cursor with live coordinates that locks onto links and buttons and measures them. CLI: `Crosshair`.
- [Crystalized Ball](https://www.reactbits.dev/animations/crystalized-ball): A glass ball with a crackling electric rim and glowing dust that swirls with the cursor. CLI: `CrystalizedBall`.
- [Cubes](https://www.reactbits.dev/animations/cubes): A grid of outlined 3D cubes that turn to face the cursor, spin when swept and ripple on click. CLI: `Cubes`.
- [Cursor Grid](https://www.reactbits.dev/animations/cursor-grid): Canvas grid whose cells light up around the cursor with configurable radius, falloff and click pulses. CLI: `CursorGrid`.
- [Dither Veil](https://www.reactbits.dev/animations/dither-veil): A 1-bit dithered photo the cursor burns through to full colour, knitting back cell by cell. CLI: `DitherVeil`.
- [Elastic Mesh](https://www.reactbits.dev/animations/elastic-mesh): Turns text or any logo into a puffy inflated shape you can press, poke and stretch like jelly. CLI: `ElasticMesh`.
- [Electric Border](https://www.reactbits.dev/animations/electric-border): Wraps any element in crackling strands of current that surge near the cursor and leap off in sparks. CLI: `ElectricBorder`.
- [Electric Logo](https://www.reactbits.dev/animations/electric-logo): Turns any logo into a living lightning outline, with arcs that leap off its edges. CLI: `ElectricLogo`.
- [Fade Content](https://www.reactbits.dev/animations/fade-content): Simple directional fade / slide entrance / exit wrapper with threshold-based activation. CLI: `FadeContent`.
- [Ghost Cursor](https://www.reactbits.dev/animations/ghost-cursor): A ghost of glowing smoke that floats after the cursor and curls away as it rises. CLI: `GhostCursor`.
- [Glare Hover](https://www.reactbits.dev/animations/glare-hover): A glossy light streak that sweeps across any element in the direction the cursor moves. CLI: `GlareHover`.
- [Glow Cursor](https://www.reactbits.dev/animations/glow-cursor): Light that pours from the cursor, drifts softly through the air and cools as it fades. CLI: `GlowCursor`.
- [Gradual Blur](https://www.reactbits.dev/animations/gradual-blur): Progressively un-blurs content based on scroll or trigger creating a cinematic reveal. CLI: `GradualBlur`.
- [Halftone Reveal](https://www.reactbits.dev/animations/halftone-reveal): A halftone print of an image whose dots swell into the real photo under the cursor. CLI: `HalftoneReveal`.
- [Image Trail](https://www.reactbits.dev/animations/image-trail): Cursor-based image trail with several built-in variants. CLI: `ImageTrail`.
- [Laser Flow](https://www.reactbits.dev/animations/laser-flow): A beam of light that splashes onto your content and pours over its corners. CLI: `LaserFlow`.
- [Logo Loop](https://www.reactbits.dev/animations/logo-loop): Continuously looping marquee of brand or tech logos with seamless repeat and hover pause. CLI: `LogoLoop`.
- [Magnet](https://www.reactbits.dev/animations/magnet): Elements magnetically ease toward the cursor then settle back with spring physics. CLI: `Magnet`.
- [Meta Balls](https://www.reactbits.dev/animations/meta-balls): Liquid metaballs that merge, stretch and pinch apart, with a cursor blob that pushes through them. CLI: `MetaBalls`.
- [Metallic Paint](https://www.reactbits.dev/animations/metallic-paint): Liquid chrome that flows over your logo or text, adapted from Paper's Liquid Metal shader. CLI: `MetallicPaint`.
- [Noise](https://www.reactbits.dev/animations/noise): Film grain overlay for photos and pages, from fine 35mm grain to dust, paper and TV static. CLI: `Noise`.
- [Orbit Images](https://www.reactbits.dev/animations/orbit-images): SVG Path customizable orbiting images effect. CLI: `OrbitImages`.
- [Pixel Swap](https://www.reactbits.dev/animations/pixel-swap): Pixel fragments assemble into a cover, swap the content underneath, then dissolve away. CLI: `PixelSwap`.
- [Pixel Trail](https://www.reactbits.dev/animations/pixel-trail): Glossy pixels melt into a fluid goo trail behind the cursor, with color shifts and drips. CLI: `PixelTrail`.
- [Pixel Transition](https://www.reactbits.dev/animations/pixel-transition): Retro pixel dissolve that covers a card in solid pixels, swaps the content underneath and clears again. CLI: `PixelTransition`.
- [Ribbons](https://www.reactbits.dev/animations/ribbons): Springy ribbons that trail the cursor, in lens, comet or even shapes with an optional wave. CLI: `Ribbons`.
- [Ripple Distortion](https://www.reactbits.dev/animations/ripple-distortion): Pointer-driven water displacement that warps content and leaves a decaying wake. CLI: `RippleDistortion`.
- [Scroll Expand](https://www.reactbits.dev/animations/scroll-expand): A rounded media frame that grows to full bleed as it scrolls through the viewport. CLI: `ScrollExpand`.
- [Shape Blur](https://www.reactbits.dev/animations/shape-blur): A crisp logo or shape that drifts out of focus under the pointer like a camera lens. CLI: `ShapeBlur`.
- [Splash Cursor](https://www.reactbits.dev/animations/splash-cursor): Liquid splash burst at cursor with curling ripples and waves. CLI: `SplashCursor`.
- [Star Border](https://www.reactbits.dev/animations/star-border): A twinkling star that travels the exact outline of any button, pill or card, trailing light and stardust. CLI: `StarBorder`.
- [Sticker Peel](https://www.reactbits.dev/animations/sticker-peel): A die-cut sticker you can peel at any edge, drag, throw and swing, in gloss, matte or holographic finishes. CLI: `StickerPeel`.
- [Strands](https://www.reactbits.dev/animations/strands): Glowing ribbon-like strands that ripple and weave across a transparent canvas. CLI: `Strands`.
- [Swarm Cursor](https://www.reactbits.dev/animations/swarm-cursor): A liquid swarm of particles that flows after the cursor, curls into eddies and pours around hovered buttons. CLI: `SwarmCursor`.
- [Target Cursor](https://www.reactbits.dev/animations/target-cursor): A reticle cursor whose corner brackets snap around targets, matching their shape. CLI: `TargetCursor`.
## Components
- [Accordion Gallery](https://www.reactbits.dev/components/accordion-gallery): Panels expand on hover or focus, revealing parallax imagery and captions. CLI: `AccordionGallery`.
- [Animated List](https://www.reactbits.dev/components/animated-list): A scrolling list whose rows spring into view, with a gliding selection and arrow keys. CLI: `AnimatedList`.
- [Border Glow](https://www.reactbits.dev/components/border-glow): Glowing mesh-gradient border that follows cursor direction and intensifies near edges. CLI: `BorderGlow`.
- [Bounce Cards](https://www.reactbits.dev/components/bounce-cards): A fan of photo cards that bounce in, then spread apart and straighten the one you hover. CLI: `BounceCards`.
- [Bubble Menu](https://www.reactbits.dev/components/bubble-menu): Floating circular expanding menu with staggered item reveal. CLI: `BubbleMenu`.
- [Card Nav](https://www.reactbits.dev/components/card-nav): Expandable navigation bar with card panels revealing nested links. CLI: `CardNav`.
- [Card Swap](https://www.reactbits.dev/components/card-swap): A 3D stack of cards that sends the front card to the back on a timer, or when you fling it. CLI: `CardSwap`.
- [Carousel](https://www.reactbits.dev/components/carousel): Swipeable cards for feature tours, stories and galleries, with five transitions and an autoplay timer. CLI: `Carousel`.
- [Chroma Grid](https://www.reactbits.dev/components/chroma-grid): A grid of grayscale photo cards where a spotlight follows the cursor and brings back color. CLI: `ChromaGrid`.
- [Circular Carousel](https://www.reactbits.dev/components/circular-carousel): A 3D ring of images with bendable cards, momentum drag, snapping and click to focus. CLI: `CircularCarousel`.
- [Circular Gallery](https://www.reactbits.dev/components/circular-gallery): A curved image gallery you can drag, scroll or tab through, with cards that open to the full image. CLI: `CircularGallery`.
- [Counter](https://www.reactbits.dev/components/counter): Flexible animated counter supporting increments + easing. CLI: `Counter`.
- [Curved Input](https://www.reactbits.dev/components/curved-input): Arc-bent input bar with text, caret and submit button all following the curve. CLI: `CurvedInput`.
- [Decay Card](https://www.reactbits.dev/components/decay-card): An image card that tears and melts as the pointer moves, then pulls itself back together. CLI: `DecayCard`.
- [Depth Carousel](https://www.reactbits.dev/components/depth-carousel): Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance. CLI: `DepthCarousel`.
- [Dock](https://www.reactbits.dev/components/dock): macOS style dock with smooth magnification, launch bounce, badges and context menus. CLI: `Dock`.
- [Dome Gallery](https://www.reactbits.dev/components/dome-gallery): Immersive 3D dome gallery projecting images on a hemispheric surface. CLI: `DomeGallery`.
- [Drift Wall](https://www.reactbits.dev/components/drift-wall): An endless perspective wall of tiles drifting past, lifting on hover. CLI: `DriftWall`.
- [Elastic Slider](https://www.reactbits.dev/components/elastic-slider): Slider handle stretches elastically then snaps with spring physics. CLI: `ElasticSlider`.
- [Flex Carousel](https://www.reactbits.dev/components/flex-carousel): An infinite image row that flows through invisible liquid glass at its edges. CLI: `FlexCarousel`.
- [Flowing Menu](https://www.reactbits.dev/components/flowing-menu): Liquid flowing active indicator glides between menu items. CLI: `FlowingMenu`.
- [Fluid Glass](https://www.reactbits.dev/components/fluid-glass): Glassmorphism container with animated liquid distortion refraction. CLI: `FluidGlass`.
- [Flying Posters](https://www.reactbits.dev/components/flying-posters): 3D posters that twist and flip as you scroll or drag through an endless column. CLI: `FlyingPosters`.
- [Folder](https://www.reactbits.dev/components/folder): Folder that drops its flap open or swings open like a book, with pages you can pick. CLI: `Folder`.
- [Glass Icons](https://www.reactbits.dev/components/glass-icons): Liquid glass icons that bend the color behind them, for app grids, docks and social links. CLI: `GlassIcons`.
- [Glass Surface](https://www.reactbits.dev/components/glass-surface): Apple-style liquid glass that bends what is behind it, in a rounded panel or any logo shape. CLI: `GlassSurface`.
- [Gooey Nav](https://www.reactbits.dev/components/gooey-nav): A navigation bar whose active pill breaks into goo that flows over to the item you pick. CLI: `GooeyNav`.
- [Holo Card](https://www.reactbits.dev/components/holo-card): Collectible trading card with a real holographic foil and glitter that sparkles as it tilts. CLI: `HoloCard`.
- [Infinite Menu](https://www.reactbits.dev/components/infinite-menu): A draggable sphere of image tiles that snaps the nearest one forward and shows its title. CLI: `InfiniteMenu`.
- [Infinite Spiral](https://www.reactbits.dev/components/infinite-spiral): An endlessly looping 3D helix of images with adjustable motion, depth and spacing. CLI: `InfiniteSpiral`.
- [Lanyard](https://www.reactbits.dev/components/lanyard): Swinging 3D badge on a stretchy woven band that you can drag, throw or click to flip. CLI: `Lanyard`.
- [Line Sidebar](https://www.reactbits.dev/components/line-sidebar): Static list navigation with a cursor-proximity effect that shifts and highlights nearby items. CLI: `LineSidebar`.
- [Magic Bento](https://www.reactbits.dev/components/magic-bento): A bento grid of feature cards with live artwork, edge light that follows the cursor and a click wave. CLI: `MagicBento`.
- [Masonr
