React Bits is one of the largest effect collections in the ecosystem - its index carries 664 items - and it is organised differently from the shadcn registries: by effect rather than by component. Text animations, backgrounds, interaction effects, transitions. That organisation is the reason people find it and the reason it is easy to over-install from.
What it is good for
Finding the effect you saw somewhere. The catalogue is browsable by what an effect does rather than by which component it belongs to, which is exactly how people search for this kind of thing: not "I need a heading component" but "I want the text that scrambles".
For that job it is genuinely useful, and the honest recommendation is to browse it, find the effect, then decide how to get it - which is often not by installing.
The trap
Effect collections invite one-at-a-time installs, and each one arrives with its own assumptions: its own animation approach, its own timing, sometimes its own runtime. Six effects from six places produce a page where nothing shares an easing curve and the bundle carries two animation libraries.
The animation guide has the cost model. The short version: notice which tier you are buying into, because installing one component commits the page to its runtime whether or not you use it again.
Best React Bits alternative libraries
Most React Bits alternatives are not another giant effect list. They are smaller libraries with a consistent motion language and real component pages you can compare before installing.
| Library | Best for | Components to preview |
|---|---|---|
| Motion Primitives | Text, hover and transition primitives you compose yourself | Text Effect, Text Scramble, Tilt |
| Magic UI | Finished marketing effects | Text Reveal, Sparkles Text, Animated Beam |
| Aceternity UI | High-impact backgrounds, cards and scroll effects | Sparkles, Aurora Background, Glowing Effect |
| Kokonut UI | Animated SVG backgrounds and AI surfaces | Background Paths, Beams Background, Hand Writing Text |
| Cult UI | Interaction effects that are already shaped as controls | 3D Carousel, Floating Panel, Glass Effect |
For one-off swaps outside a library, Gooey Text Morphing is the fluid text option. CSS scroll-driven animations handle reveals and progress with no runtime, per the scroll guide, while a tilt is perspective plus rotate3d and a glow is a radial gradient following two CSS variables.
The rule that keeps a page coherent
Pick one source for movement and stay in it, the same way you pick one icon family. Effects from one place share timing and easing, which is most of what makes a page feel considered rather than assembled - the argument the Motion Primitives guide makes for building-block sets.
Then allow yourself one exception, for the single effect that is meant to be memorable. One is a decision; four is a bundle.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| React Bits | Browsing by effect, which is how people search | Easy to install six things from six mental models |
| CSS | Reveals, shimmers, marquees, tilts and glows | Orchestration gets verbose |
| Motion Primitives on 21st | A coherent set of reusable motion building blocks | Building blocks rather than full sections |
| 21st library directory | Comparing complete libraries before individual effects | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Compare motion libraries on 21st →
Frequently asked
- What is React Bits good for?
- Finding an effect you saw somewhere. Its 664 items are organised by what an effect does rather than by which component it belongs to, which is exactly how people search for this: not I need a heading component but I want the text that scrambles.
- What is the risk with effect collections?
- One-at-a-time installs. Each effect arrives with its own animation approach, timing and sometimes its own runtime, so six from six places produce a page where nothing shares an easing curve and the bundle carries two animation libraries.
- What are the cheaper equivalents for common effects?
- Scroll reveals and progress are CSS scroll-driven animations with no runtime. A tilt is perspective plus rotate3d in a dozen lines. A glow is a radial gradient following two CSS variables. Text effects and backgrounds have single-source equivalents that at least share timing with each other.
- How do you keep a page with effects coherent?
- Pick one source for movement and stay in it, the way you pick one icon family, so the effects share timing and easing. Then allow exactly one exception for the effect that is meant to be memorable. One is a decision; four is a bundle.