React Bits

Overview

React Bits is a free, open-source collection of animated React components for creative developers. It offers more than 215 components and backgrounds, each with a live demo and controls for tuning values, and each available in four flavors: JavaScript or TypeScript, styled with plain CSS or Tailwind. Components can be copied as source or installed with the shadcn CLI, and an MCP server lets AI agents add them.

The library is licensed under MIT with the Commons Clause. A separate paid React Bits Pro adds full page sections, app UI blocks, templates and agent skills, while the core library stays free.

Features

• Text animations: 33 effects such as split text, typewriters, rotating words and scroll reveals.
• Animations: 38 cursor effects, hover interactions, animated borders and image effects.
• Components: 48 cards, navigation patterns, carousels and galleries.
• Micro interactions: 34 buttons, toggles, indicators and other small details.
• Backgrounds: 63 gradients, particle fields, grids and shader effects for full sections.
• Four variants per component: JS-CSS, JS-TW, TS-CSS and TS-TW versions in the registry.
• Agent support: An MCP server and tools pages for working with AI assistants.

Tech stack

• React, TypeScript or JavaScript, Tailwind CSS or plain CSS
• Motion, GSAP, OGL, three.js and React Three Fiber, Matter.js

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @react-bits/component-name