# React Bits: 165+ Animated React Components You Install Through shadcn > React Bits is a copy-paste and CLI-installable collection of animated React components distributed as four variants (JS-CSS, JS-TW, TS-CSS, TS-TW). The components are the product; the licensing and the missing release history are the things to check before you commit. **DavidHDev/react-bits** — React Bits is a library of 140+ animated, customizable React components for text, backgrounds, and UI, offered as copy-paste-ready JS/TS variants with CSS or Tailwind. - Repository: https://github.com/DavidHDev/react-bits - Website: https://reactbits.dev - Stars: 48,272 · Forks: 2,361 - Language: JavaScript - License: not declared - Published: 2026-08-08 · Updated: 2026-08-18 · Language: en - Canonical page: https://hysenlabs.com/projects/davidhdev-react-bits ## What React Bits actually solves for a React team The README frames the problem plainly: instead of spending hours crafting animations from scratch, you take a finished component and adjust it. That is a real gap. Animation work in React usually means hand-rolling a requestAnimationFrame loop, wiring GSAP or Motion, and then tuning easing curves until a headline feels right. React Bits ships that tuning already done, across text animations, UI elements and backgrounds. The audience is narrow but well defined. This is for frontend developers building sites where motion is part of the pitch: landing pages, portfolios, product launches. It is not a general-purpose UI kit. There are no form controls, no data tables, no date pickers. The README's own categories are text animations, animations, components and backgrounds, and everything in the collection exists to make a page move. The distribution model matters more than the component count. React Bits is not published as a single npm package you import. The README points at shadcn and jsrepo for CLI installs, and says each component page includes copy-ready CLI commands. The repository's package.json confirms the mechanism: it is a private package ("private": true, version 0.0.0) whose build script runs jsrepo build. The registry is the product, and the components land in your source tree. ## How the four-variant registry works Every component is offered in four combinations: JS-CSS, JS-TW, TS-CSS and TS-TW. That is JavaScript or TypeScript, paired with plain CSS or Tailwind. The README calls this "4 variants per component" and describes it as a way to keep everyone happy. In practice it means the registry holds four source files per component, and the name you pass to the CLI selects which one you get. The naming convention is visible in the README's own example: @react-bits/BlurText-TS-TW. The suffix encodes language and styling, so TS-TW is TypeScript with Tailwind, and a JS-CSS request would pull the plain-CSS JavaScript version. This is a sensible design for a copy-paste library. You get source that matches your stack rather than a compiled bundle that assumes one. The trade-off is that the variant you pick is the variant you maintain. Once the file is in your repository, upstream changes to that component do not reach you. There is no dependency to bump. For a component you plan to modify heavily, that is an advantage. For one you expect the maintainer to keep fixing, it is a cost you absorb yourself. The repository layout backs this up. There is a jsrepo.config.ts at the top level, a scripts/ directory holding generateComponent.js, checkPropDocs.js and generateLlmsText.js, and a build pipeline that runs a prop-documentation check before the registry build. A prop-docs check in the build chain suggests the project enforces that documented props match the source, which is more discipline than most component collections apply. ## Installing React Bits and rendering your first component The README gives one installation example and points to the installation guide at reactbits.dev/get-started/installation for the rest. The example uses shadcn, so you need a project that already has shadcn configured. The command adds a single component by its registry name: ```bash # Example: Add a component via shadcn npx shadcn@latest add @react-bits/BlurText-TS-TW ``` After it runs, the component source appears in your project according to your shadcn configuration, and you import it like any local file. The README does not show the resulting import path, so check what shadcn wrote to disk before you reference it. The README also names jsrepo as a supported installer, and the repository's own build uses jsrepo build, so the registry format is native to that tool. The README does not spell out the jsrepo command for consumers, so if you prefer it over shadcn, take the command from the component page rather than guessing at flags. There is a third path the README states directly: you can select your preferred technologies and copy the code manually. That is the fallback when neither CLI fits your setup, and it is the only option if you want to read the whole component before it touches your tree. What you should see after a successful install is a new source file in your components directory and no new entry in package.json. That last part is the point of the design, and it is also the first thing that surprises people coming from a normal npm workflow. ## Where React Bits is the wrong tool The components are not versioned dependencies, and the repository shows no releases. Nothing in the README describes a changelog, a semantic version, or an upgrade path for a component you already copied. If your team needs a pinned artifact with a release history you can diff, this model does not provide one. You would be tracking a moving main branch by hand. Dependency weight is the second constraint. The root package.json lists react-three/fiber, react-three/drei, react-three/rapier, postprocessing, matter-js, gsap, motion, lenis, ogl, mathjs and face-api.js. That is the site's own dependency set, not necessarily what any single component requires, and the README claims minimal dependencies and tree-shaking. Those two statements are not in conflict, but they do mean you cannot tell from the README alone what a given component drags in. A physics-based or face-tracking component is a different proposition from a text fade. Check the component page before you install. React 19 is the declared baseline in package.json. If you are on an older React, the variants may not drop in cleanly, and the README does not discuss backwards compatibility. Finally, this is a visual layer. If your problem is accessible form validation, data fetching or routing, React Bits has nothing for you, and adding animated backgrounds to a dashboard that needs none is a bundle cost with no return. ## React Bits compared with Framer Motion and GSAP The honest comparison is not against another component library. It is against the animation primitives you would otherwise use, and the repository's own package.json names two of them: motion (the Framer Motion lineage) and gsap, alongside @gsap/react. Those libraries give you a system for describing animation. You write the tween, the spring, the timeline, and you own the result. React Bits gives you finished outcomes: a specific text reveal, a specific background shader, a specific hover effect. The difference in approach is authorship. With Motion or GSAP you are the animator. With React Bits you are the editor, adjusting props or rewriting source that already works. That makes React Bits a poor fit for novel interaction design, where no existing component matches what you have in mind, and a strong fit for the common cases where someone has already solved the problem well. It also means the two are not exclusive. A project can use GSAP for a bespoke hero sequence and pull a React Bits background for the section below it. The README's credit section acknowledges this lineage directly, noting that the project occasionally draws inspiration from publicly available code examples and rewrites them as customizable components, with an invitation to open an issue if you recognize your work. That is a candid note, and it is also a reason to read a component's source before shipping it. ## Licence, maintenance and what upgrading costs you The README states the licence as MIT plus Commons Clause, linking to LICENSE.md, and describes it as free for personal and commercial use. That description is the README's, not a legal reading of the file. MIT plus Commons Clause is a known pattern that adds a restriction on top of permissive MIT terms, and the exact restriction lives in LICENSE.md. Read that file before you ship a component in a paid product. This is not legal advice, and the repository's one-line summary is not a substitute for the text. The repository is not archived. No last push date is given, so there is no basis for describing the project as actively maintained or regularly updated. The README says the component set is "growing weekly" and names David Haz as creator and lead maintainer; treat that as the project's own claim about cadence, not as an observation about commit history. Upgrade cost follows from the distribution model. Because components are copied rather than installed, there is no npm update that fixes a bug in a component you already own. Upgrading means re-running the CLI for that component and reconciling the diff against your local edits, or reading the current source and porting the change by hand. Budget for that if you plan to customize heavily. The repository does carry maintenance infrastructure: ESLint and Prettier configs, a prop-documentation check wired into the build, a test file for that check, and a CONTRIBUTING.md. That is a reasonable signal about how contributions are handled, though it says nothing about how quickly issues are closed. ## Conclusion Adopt React Bits if you are building a marketing site or portfolio in React 19 and want animated text, backgrounds and UI elements without writing the animation layer yourself, and you are comfortable that the code lands in your repo rather than behind a versioned package. Do not adopt it if you need a pinned npm dependency with a changelog and a support contract, or if your project cannot absorb the peer dependencies some components pull in, such as the react-three, matter-js, gsap or face-api.js entries visible in package.json. Verify three things first: the exact component name in the registry (the CLI form is @react-bits/--