DavidHDev/react-bits

What is it?

Key features

• 01Over 215 animated components and backgrounds across text, interaction, card and background categories.
• 02Each component ships in JavaScript or TypeScript with either CSS or Tailwind styling.
• 03Install with the shadcn or jsrepo CLI, or copy the source directly.
• 04Works with AI coding agents through the shadcn MCP registry.
• 05Includes free browser tools for backgrounds, product mockups, logos, textures and sounds.

Use cases

• Adding eye-catching text animations or scroll reveals to a marketing site or landing page.
• Building animated hero sections and full-page backgrounds in a Next.js or React app.
• Letting an AI coding agent pull ready-made components into a Tailwind project.
• Creating product screenshots, looping background videos or sound effects for launches and demos.

Quick start

1. 1

   Add a component with the shadcn CLI

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

   Or add it with jsrepo

   npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

Things to know

• !The license name includes the Commons Clause, which restricts selling the software itself, so read LICENSE.md before commercial use.
• !The repository metadata shows no detected license, so the license terms should be checked directly in LICENSE.md.

Topics

FAQ

What is react-bits?

A library of 215+ free, animated and customizable React and Next.js components and backgrounds, installable via shadcn or jsrepo. React Bits is a collection of animated, interactive React and Next.js components for building visually distinctive web interfaces. It covers text animations such as split text, typewriters and scroll reveals, plus cursor effects, hover interactions, cards, carousels, small UI micro-interactions and full-section animated backgrounds.

Is react-bits free to use? What license does it have?

react-bits is open source under the Other license. Check the license terms before using it in commercial products.

Is react-bits still maintained?

Actively maintained. The last commit to react-bits was on Oct 19, 2026.

What can I use react-bits for?

Adding eye-catching text animations or scroll reveals to a marketing site or landing page. Building animated hero sections and full-page backgrounds in a Next.js or React app. Letting an AI coding agent pull ready-made components into a Tailwind project. Creating product screenshots, looping background videos or sound effects for launches and demos.

How do I install react-bits?

Add a component with the shadcn CLI: npx shadcn@latest add @react-bits/SplitText-TS-TW Or add it with jsrepo: npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

Where can I get react-bits?

The source code and installation instructions are on GitHub: https://github.com/DavidHDev/react-bits