Registries
ActiveFeaturedAnimated components42,980

@react-bits

Animated components · data updated 2026-07-08

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.

WebsiteDocsGitHubComponents folder

Install

npx shadcn@latest add https://reactbits.dev/r/registry.json

Health

StatusActive
Last committoday
License—
Open issues1
ArchivedNo
Stars42,980

Components (540)

AnimatedContent-JS-CSSAnimatedContent-JS-TWAnimatedContent-TS-CSSAnimatedContent-TS-TWBlobCursor-JS-CSSBlobCursor-JS-TWBlobCursor-TS-CSSBlobCursor-TS-TWClickSpark-JS-CSSClickSpark-JS-TWClickSpark-TS-CSSClickSpark-TS-TWCrosshair-JS-CSSCrosshair-JS-TWCrosshair-TS-CSSCrosshair-TS-TWCubes-JS-CSSCubes-JS-TWCubes-TS-CSSCubes-TS-TWElectricBorder-JS-CSSElectricBorder-JS-TWElectricBorder-TS-CSSElectricBorder-TS-TWFadeContent-JS-CSSFadeContent-JS-TWFadeContent-TS-CSSFadeContent-TS-TWGlareHover-JS-CSSGlareHover-JS-TWGlareHover-TS-CSSGlareHover-TS-TWGradualBlur-JS-CSSGradualBlur-JS-TWGradualBlur-TS-CSSGradualBlur-TS-TWGhostCursor-JS-CSSGhostCursor-JS-TWGhostCursor-TS-CSSGhostCursor-TS-TWImageTrail-JS-CSSImageTrail-JS-TWImageTrail-TS-CSSImageTrail-TS-TWLogoLoop-JS-CSSLogoLoop-JS-TWLogoLoop-TS-CSSLogoLoop-TS-TWMagnet-JS-CSSMagnet-JS-TWMagnet-TS-CSSMagnet-TS-TWMagnetLines-JS-CSSMagnetLines-JS-TWMagnetLines-TS-CSSMagnetLines-TS-TWMetaBalls-JS-CSSMetaBalls-JS-TWMetaBalls-TS-CSSMetaBalls-TS-TW
Components: AnimatedContent-JS-CSS, AnimatedContent-JS-TW, AnimatedContent-TS-CSS, AnimatedContent-TS-TW, BlobCursor-JS-CSS, BlobCursor-JS-TW, BlobCursor-TS-CSS, BlobCursor-TS-TW, ClickSpark-JS-CSS, ClickSpark-JS-TW, ClickSpark-TS-CSS, ClickSpark-TS-TW, Crosshair-JS-CSS, Crosshair-JS-TW, Crosshair-TS-CSS, Crosshair-TS-TW, Cubes-JS-CSS, Cubes-JS-TW, Cubes-TS-CSS, Cubes-TS-TW, ElectricBorder-JS-CSS, ElectricBorder-JS-TW, ElectricBorder-TS-CSS, ElectricBorder-TS-TW, FadeContent-JS-CSS, FadeContent-JS-TW, FadeContent-TS-CSS, FadeContent-TS-TW, GlareHover-JS-CSS, GlareHover-JS-TW, GlareHover-TS-CSS, GlareHover-TS-TW, GradualBlur-JS-CSS, GradualBlur-JS-TW, GradualBlur-TS-CSS, GradualBlur-TS-TW, GhostCursor-JS-CSS, GhostCursor-JS-TW, GhostCursor-TS-CSS, GhostCursor-TS-TW, ImageTrail-JS-CSS, ImageTrail-JS-TW, ImageTrail-TS-CSS, ImageTrail-TS-TW, LogoLoop-JS-CSS, LogoLoop-JS-TW, LogoLoop-TS-CSS, LogoLoop-TS-TW, Magnet-JS-CSS, Magnet-JS-TW, Magnet-TS-CSS, Magnet-TS-TW, MagnetLines-JS-CSS, MagnetLines-JS-TW, MagnetLines-TS-CSS, MagnetLines-TS-TW, MetaBalls-JS-CSS, MetaBalls-JS-TW, MetaBalls-TS-CSS, MetaBalls-TS-TW, Strands-JS-CSS, Strands-JS-TW, Strands-TS-CSS, Strands-TS-TW, MetallicPaint-JS-CSS, MetallicPaint-JS-TW, MetallicPaint-TS-CSS, MetallicPaint-TS-TW, Noise-JS-CSS, Noise-JS-TW, Noise-TS-CSS, Noise-TS-TW, PixelTrail-JS-CSS, PixelTrail-JS-TW, PixelTrail-TS-CSS, PixelTrail-TS-TW, PixelTransition-JS-CSS, PixelTransition-JS-TW, PixelTransition-TS-CSS, PixelTransition-TS-TW, Ribbons-JS-CSS, Ribbons-JS-TW, Ribbons-TS-CSS, Ribbons-TS-TW, ShapeBlur-JS-CSS, ShapeBlur-JS-TW, ShapeBlur-TS-CSS, ShapeBlur-TS-TW, SplashCursor-JS-CSS, SplashCursor-JS-TW, SplashCursor-TS-CSS, SplashCursor-TS-TW, StarBorder-JS-CSS, StarBorder-JS-TW, StarBorder-TS-CSS, StarBorder-TS-TW, StickerPeel-JS-CSS, StickerPeel-JS-TW, StickerPeel-TS-CSS, StickerPeel-TS-TW

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@react-bits · AnimatedContent-JS-CSS

npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-JS-CSS.json
View source