Skip to content
Index730 resources
React Bits

React Bits

234 copy-paste animated React components: text effects, cursors, WebGL backgrounds

Tier S · Best in classAnimation LibraryComponent LibraryRegistryreactbits.dev

(Visit reactbits.dev ↗)(Docs)(Repository)(Registry)
Preview image from reactbits.dev

React Bits is an open-source catalog of 234 animated React components split into four buckets: Text Animations (32), Animations (37 cursor/hover/reveal effects), Components (44 cards, galleries, menus, docks) and Backgrounds (53 WebGL and canvas scenes). Every component ships in four variants — JS or TS, plain CSS or Tailwind — and installs through the shadcn or jsrepo CLI. It is aimed at marketing sites, hero sections and portfolio pages rather than at application UI, and official Vue and Svelte ports exist.

Install
npx shadcn@latest add https://reactbits.dev/r/BlurText-TS-TW

For an agent

Reach for React Bits when the brief is a hero, a landing page or a portfolio and the ask is visual impact — not when you need form controls or a11y-correct app UI, which it does not ship. Install by exact variant slug (`<Component>-<JS|TS>-<CSS|TW>`) so the code matches the host project's language and styling; the shadcn registry.json only exposes ~62 of the 234, so read https://reactbits.dev/llms.txt to resolve names before installing. Many Backgrounds components are WebGL/three.js scenes that will dominate the bundle and drain battery — cap them at one per page and pair with a reduced-motion fallback.

Why it is here. It is the largest single source of drop-in web-motion components for React, and the four-variant JS/TS × CSS/Tailwind matrix means an agent can install into almost any codebase without rewriting.

Install command, framework, licence and component list.

Facts

License
MIT, Source available
Pricing
Free, Open source
Framework
React, Next.js, Vue, Svelte
Styling
Tailwind CSS v4, Tailwind CSS, Vanilla CSS, Shader / GLSL
Distribution
shadcn registry, CLI installer, Copy-paste snippet, GitHub repository
Platform
Web
Content type
Code
Agent readiness
Machine-readable registry item, CLI installable, llms.txt, Copy-paste ready code, Readable open source, Client-rendered shell
Accessibility
Honors reduced motion, Known accessibility gaps
Maturity
Actively maintained
GitHub stars
45,554

Components it ships

234 total
Text EffectTypewriter TextCount UpScroll RevealScroll Driven AnimationMarqueeCustom CursorHover EffectParticle BackgroundGradient BackgroundGlassmorphismTransitionAnimationShimmerRippleDockCarouselMasonryCardCard GridBento GridImage GalleryNavigation MenuNavbarSidebarProgress StepperSliderModel ViewerStackListButtonText InputIcon

Helps you build

6
HomepageFeaturesWaitlistPricing WebsitePublic ProfileSplash Screen

Notable for

  • 234 components in four categories
  • JS/TS × CSS/Tailwind variant matrix
  • 53 WebGL and canvas backgrounds
  • official Vue and Svelte ports
  • MIT + Commons Clause, not plain MIT

Provenance

Verified 2026-08-15. HTTP 200. https://reactbits.dev (JS shell, no content), https://reactbits.dev/llms.txt (full component index), https://reactbits.dev/r/registry.json (248 registry items = 62 components x 4 variants), https://github.com/DavidHDev/react-bits, GitHub API repo metadata

Also in Motion & Interaction

6
reactbits.devTier S