Tools· Design & Creative

React Bits

Open source library of 140-plus animated React components for text effects, backgrounds, and interactive UI pieces, available in JavaScript or TypeScript with CSS or Tailwind, dropped into a project via copy-paste or CLI.

designingexecutableFreemium

Open provider

Description

React Bits is an open source collection of over 140 animated and interactive React components by developer David Haz, split into four categories: text animations, general animations, interactive UI pieces, and animated backgrounds. Every component comes in four technical variants, JavaScript or TypeScript combined with plain CSS or Tailwind, so it fits whatever stack a project already uses. Instead of being pulled in as an npm dependency, the code is copied directly into the project, either manually from the website or through a CLI built on jsrepo or the shadcn registry, which gives full visibility and control over the source.

The animations run on different underlying libraries depending on the component, GSAP for text and scroll effects, for example, or Three.js for elaborate WebGL backgrounds such as Aurora, Hyperspeed, or Liquid Chrome, and the matching add-on packages have to be installed separately for each component. For anyone who wants to avoid WebGL in a project altogether, or who is working on a brand with a very restrained, quiet look, most of these fairly expressive effects will not fit without adjustment.

Compared with structural component libraries such as shadcn/ui, which supply basic building blocks for buttons, forms, and layout, React Bits deliberately covers the expressive side: motion, text effects, and atmospheric backgrounds for landing pages and marketing sites. In that space it sits alongside other free motion component libraries and works as a complement to an existing UI foundation, not a replacement for it.

Strengths

Large, growing component library

Over 140 components across four categories, growing weekly according to the provider.

Four technical variants per component

Every component is available as JS-CSS, JS-TW, TS-CSS, and TS-TW, matching whatever the current project stack is.

Full source code instead of a package dependency

Components are copied into your own code rather than imported as an npm package, so every line stays visible and editable.

Adjustable through props

Look and behavior can be tuned through props without having to dive into the source for every change.

Flexible installation

Components can be copied straight from the website or installed through a CLI, via jsrepo or a shadcn-compatible registry.

Assessment

AI features

Built for AI coding assistants According to the provider, it works well with Cursor, Copilot, and v0: the desired effect is described, the matching component is picked, and it is dropped straight in.
shadcn-compatible CLI installation Installation follows the same command pattern as the shadcn registry, which lets React Bits slot into environments that already rely on that CLI format.
Readable code for agent editing Because every component sits in the project as open source rather than a compiled library, an AI assistant can open the animation logic directly and adjust it on request.

Suitable for

Marketing landing pages and portfolio sites that need to stand out from standard UI through motion and text effects
React projects using Tailwind or plain CSS that want individual ready-made effects rather than a full design library
Teams already using shadcn/ui or a similar structural library who want to add expressive motion components on top
Less suitable for Less suitable for projects with a restrained, flat brand look, or for environments that deliberately avoid WebGL, since some of the background components are built on Three.js

Limitations and notes

Commons Clause license MIT license with the Commons Clause, free to use including commercially, but the components themselves may not be resold as a standalone, competing product.
Extra dependencies per component Motion runs on GSAP, React Spring, or Three.js depending on the component, and the matching packages have to be installed separately, there is no single bundle.
Use WebGL backgrounds deliberately Components such as Aurora, Hyperspeed, Liquid Chrome, or Balatro run on Three.js and are correspondingly heavier than plain CSS animations.
Not an npm package, but copied code Library updates do not flow into a project automatically, every adopted component has to be updated individually when needed.

Quick start

On reactbits.dev, pick the desired component from one of the four categories and try it in the live preview.
Choose the language and styling variant, JavaScript or TypeScript combined with CSS or Tailwind.
Adopt the component by copy and paste, or install it through the CLI, for example with npx jsrepo add https://reactbits.dev/<lib>/<Component> or through the shadcn-compatible CLI.
On the component's page, install the required extra packages, such as GSAP, React Spring, or Three.js with React Three Fiber.
Adjust props and styling to match your own brand, since the code lives fully in the project and is free to change.

Tips

With WebGL-heavy backgrounds such as Aurora or Hyperspeed, do not run more than one such component on the same page at once, because of the compute cost.
Respect prefers-reduced-motion, especially for continuously animated backgrounds and text effects.
Pair React Bits components deliberately with a structural library such as shadcn/ui instead of playing the two against each other.
Before installing, pick the right variant on the component page, JS or TS, CSS or Tailwind, to avoid duplicate adjustment work later.

Access

The core React Bits library is permanently free to use at reactbits.dev, components are adopted directly into your own projects by copy and paste or CLI, and it is licensed under MIT with the Commons Clause. Alongside it, the provider also runs a separate React Bits Pro offering of pre-built blocks and complete templates, covering more than 90 components, more than 200 blocks, and more than 10 templates according to the provider.

Alternatives

eldoraui.site — oss

Eldora UI

Covers the same niche with over 150 free, openly licensed animation components, and its own creators explicitly position it as a complement to shadcn/ui.

cuicui.day — oss