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.
The alternatives, per effect
Most of what people install from an effect collection has a cheaper equivalent, and the swaps are individual rather than wholesale.
Text effects: Text Effect by ibelick animates per character or per word with preset variants, and Gooey Text Morphing by victorwelander is the fluid one. The animated text guide covers which of the five kinds you actually want.
Backgrounds: Background Paths by kokonutd renders as animated SVG paths with no frame loop of its own, and the background guide covers the rest.
Scroll effects: CSS scroll-driven animations do reveals and progress with no runtime at all, per the scroll guide.
Pointer effects: a tilt is perspective plus rotate3d in about a dozen lines, 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 |
| One motion registry | Effects that share timing and easing | One aesthetic |
| 21st | The same effects with previews, across registries | 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.
Browse the registry directory →
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.