React Bits

About React Bits

React Bits is a library of over 165 animated and customizable React components, covering backgrounds, text effects, animations, and UI patterns. Components are organized into four categories and are available in four variants: JavaScript or TypeScript, paired with either CSS or Tailwind. Installation is done via a single command (supporting npx, pnpm dlx, bunx, or yarn dlx, with shadcn and jsrepo registry support) that adds the component's source files directly into the project, with no added package dependency; components use underlying libraries such as ogl and GSAP directly. The site documents compatibility with Vite, Next.js, Astro, and Remix.

The core component library is free and open source, distributed under a license noted on the site. A paid Pro tier is also offered, providing additional Pro components, blocks, and templates. The library is aimed at React developers looking to add animated visual effects and UI elements to projects without building them from scratch, and the site notes it can be used alongside AI coding tools such as Cursor, Copilot, and v0.

Separate related projects, Vue Bits and Svelte Bits, are referenced as part of the same product family. The project is credited to David Haz (davidhdev) and lists sponsor placements including shadcnblocks.com and Shadcncraft.

Key features

• 165+ animated React components including backgrounds, text effects, and UI patterns
• Every component available in JS/TS with CSS or Tailwind variants
• CLI installation via npx, pnpm, bunx, or yarn that drops component source directly into your project
• Works with Vite, Next.js, Astro, and Remix
• Components use libraries like ogl and GSAP directly with no react-bits package dependency
• Includes visual editors for customizing component props before grabbing the code

Frequently asked questions