@react-bits
React Bits is an open-source collection of 130+ highly customizable animated React components organized into four groups: Text Animations (blur text, typewriter, rotating text, etc.), Animations (star border, magnet, elastic, etc.), Components (glass, card, dock, etc.), and Backgrounds (aurora, particles, beams, noise, etc.). Each component ships in four code variants (JS+CSS, JS+Tailwind, TS+CSS, TS+Tailwind). Also includes creative tools: Background Studio, Shape Magic, and Texture Lab. Available via shadcn CLI or jsrepo. MIT + Commons Clause license (free for most use). Use for: adding attention-grabbing animated backgrounds, text effects, and interactive hero components to marketing sites or landing pages.
Install this registry
npx shadcn@latest add https://reactbits.dev/r/registry.json pnpm dlx shadcn@latest add https://reactbits.dev/r/registry.json bunx shadcn@latest add https://reactbits.dev/r/registry.json curl -s https://reactbits.dev/r/registry.json Components
60 totalWrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-JS-CSS.json Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-JS-TW.json Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-TS-CSS.json Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-TS-TW.json Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.
npx shadcn@latest add https://reactbits.dev/r/BlobCursor-JS-CSS.json Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.
npx shadcn@latest add https://reactbits.dev/r/BlobCursor-JS-TW.json Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.
npx shadcn@latest add https://reactbits.dev/r/BlobCursor-TS-CSS.json Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.
npx shadcn@latest add https://reactbits.dev/r/BlobCursor-TS-TW.json Creates particle spark bursts at click position.
npx shadcn@latest add https://reactbits.dev/r/ClickSpark-JS-CSS.json Creates particle spark bursts at click position.
npx shadcn@latest add https://reactbits.dev/r/ClickSpark-JS-TW.json Creates particle spark bursts at click position.
npx shadcn@latest add https://reactbits.dev/r/ClickSpark-TS-CSS.json Creates particle spark bursts at click position.
npx shadcn@latest add https://reactbits.dev/r/ClickSpark-TS-TW.json Custom crosshair cursor with tracking, and link hover effects.
npx shadcn@latest add https://reactbits.dev/r/Crosshair-JS-CSS.json Custom crosshair cursor with tracking, and link hover effects.
npx shadcn@latest add https://reactbits.dev/r/Crosshair-JS-TW.json Custom crosshair cursor with tracking, and link hover effects.
npx shadcn@latest add https://reactbits.dev/r/Crosshair-TS-CSS.json Custom crosshair cursor with tracking, and link hover effects.
npx shadcn@latest add https://reactbits.dev/r/Crosshair-TS-TW.json 3D rotating cube cluster. Supports auto-rotation or hover interaction.
npx shadcn@latest add https://reactbits.dev/r/Cubes-JS-CSS.json 3D rotating cube cluster. Supports auto-rotation or hover interaction.
npx shadcn@latest add https://reactbits.dev/r/Cubes-JS-TW.json 3D rotating cube cluster. Supports auto-rotation or hover interaction.
npx shadcn@latest add https://reactbits.dev/r/Cubes-TS-CSS.json 3D rotating cube cluster. Supports auto-rotation or hover interaction.
npx shadcn@latest add https://reactbits.dev/r/Cubes-TS-TW.json Jittery electric energy border with animated arcs, glow and adjustable intensity.
npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-JS-CSS.json Jittery electric energy border with animated arcs, glow and adjustable intensity.
npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-JS-TW.json Jittery electric energy border with animated arcs, glow and adjustable intensity.
npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-TS-CSS.json Jittery electric energy border with animated arcs, glow and adjustable intensity.
npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-TS-TW.json Simple directional fade / slide entrance / exit wrapper with threshold-based activation.
npx shadcn@latest add https://reactbits.dev/r/FadeContent-JS-CSS.json Simple directional fade / slide entrance / exit wrapper with threshold-based activation.
npx shadcn@latest add https://reactbits.dev/r/FadeContent-JS-TW.json Simple directional fade / slide entrance / exit wrapper with threshold-based activation.
npx shadcn@latest add https://reactbits.dev/r/FadeContent-TS-CSS.json Simple directional fade / slide entrance / exit wrapper with threshold-based activation.
npx shadcn@latest add https://reactbits.dev/r/FadeContent-TS-TW.json Adds a realistic moving glare highlight on hover over any element.
npx shadcn@latest add https://reactbits.dev/r/GlareHover-JS-CSS.json Adds a realistic moving glare highlight on hover over any element.
npx shadcn@latest add https://reactbits.dev/r/GlareHover-JS-TW.json Adds a realistic moving glare highlight on hover over any element.
npx shadcn@latest add https://reactbits.dev/r/GlareHover-TS-CSS.json Adds a realistic moving glare highlight on hover over any element.
npx shadcn@latest add https://reactbits.dev/r/GlareHover-TS-TW.json Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.
npx shadcn@latest add https://reactbits.dev/r/GradualBlur-JS-CSS.json Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.
npx shadcn@latest add https://reactbits.dev/r/GradualBlur-JS-TW.json Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.
npx shadcn@latest add https://reactbits.dev/r/GradualBlur-TS-CSS.json Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.
npx shadcn@latest add https://reactbits.dev/r/GradualBlur-TS-TW.json Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.
npx shadcn@latest add https://reactbits.dev/r/GhostCursor-JS-CSS.json Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.
npx shadcn@latest add https://reactbits.dev/r/GhostCursor-JS-TW.json Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.
npx shadcn@latest add https://reactbits.dev/r/GhostCursor-TS-CSS.json Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.
npx shadcn@latest add https://reactbits.dev/r/GhostCursor-TS-TW.json Cursor-based image trail with several built-in variants.
npx shadcn@latest add https://reactbits.dev/r/ImageTrail-JS-CSS.json Cursor-based image trail with several built-in variants.
npx shadcn@latest add https://reactbits.dev/r/ImageTrail-JS-TW.json Cursor-based image trail with several built-in variants.
npx shadcn@latest add https://reactbits.dev/r/ImageTrail-TS-CSS.json Cursor-based image trail with several built-in variants.
npx shadcn@latest add https://reactbits.dev/r/ImageTrail-TS-TW.json Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.
npx shadcn@latest add https://reactbits.dev/r/LogoLoop-JS-CSS.json Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.
npx shadcn@latest add https://reactbits.dev/r/LogoLoop-JS-TW.json Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.
npx shadcn@latest add https://reactbits.dev/r/LogoLoop-TS-CSS.json Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.
npx shadcn@latest add https://reactbits.dev/r/LogoLoop-TS-TW.json Elements magnetically ease toward the cursor then settle back with spring physics.
npx shadcn@latest add https://reactbits.dev/r/Magnet-JS-CSS.json Elements magnetically ease toward the cursor then settle back with spring physics.
npx shadcn@latest add https://reactbits.dev/r/Magnet-JS-TW.json Elements magnetically ease toward the cursor then settle back with spring physics.
npx shadcn@latest add https://reactbits.dev/r/Magnet-TS-CSS.json Elements magnetically ease toward the cursor then settle back with spring physics.
npx shadcn@latest add https://reactbits.dev/r/Magnet-TS-TW.json Animated field lines bend toward the cursor.
npx shadcn@latest add https://reactbits.dev/r/MagnetLines-JS-CSS.json Animated field lines bend toward the cursor.
npx shadcn@latest add https://reactbits.dev/r/MagnetLines-JS-TW.json Animated field lines bend toward the cursor.
npx shadcn@latest add https://reactbits.dev/r/MagnetLines-TS-CSS.json Animated field lines bend toward the cursor.
npx shadcn@latest add https://reactbits.dev/r/MagnetLines-TS-TW.json Liquid metaball blobs that merge and separate with smooth implicit surface animation.
npx shadcn@latest add https://reactbits.dev/r/MetaBalls-JS-CSS.json Liquid metaball blobs that merge and separate with smooth implicit surface animation.
npx shadcn@latest add https://reactbits.dev/r/MetaBalls-JS-TW.json Liquid metaball blobs that merge and separate with smooth implicit surface animation.
npx shadcn@latest add https://reactbits.dev/r/MetaBalls-TS-CSS.json Liquid metaball blobs that merge and separate with smooth implicit surface animation.
npx shadcn@latest add https://reactbits.dev/r/MetaBalls-TS-TW.json