Introduction

React Bits is a free, open source library of animated React components and backgrounds that you copy into your project and make your own.

What is inside

• Text Animations
• Animations
• Components
• Backgrounds
• Micro Interactions

Four flavours of every component

Each component comes in JavaScript or TypeScript, styled with plain CSS or Tailwind. The install name ends with the flavour: JS-CSS, JS-TW, TS-CSS or TS-TW.

npx shadcn@latest add @react-bits/SplitText-TS-TW

Built for AI workflows

Copy for AI on every component, Copy as Markdown on every docs page, MCP through the shadcn MCP server and an llms.txt map of the whole library.

Free tools

• Background Studio

  Browse every animated background, start from a preset and tune it live. Export the code, a high resolution image or a looping MP4 or WebM video, or share it as a link.

• Shape Magic

  Design a logo mark from smart shapes, patterns, text or your own SVG, then give it a 3D material like chrome, glass or neon, or any React Bits background. Export clean SVG, PNG, favicons, video or React.

• Texture Lab

  Run photos, videos or your camera through 160 one-click styles and 75+ stackable, animated effects, from ASCII and halftone to glass, chrome and glitch. Export images, videos, GIFs or a shareable style.

License

Free for personal and commercial work under the MIT + Commons Clause license. Use the components in any app, website or product, but do not sell, sublicense or redistribute the components themselves.