vue-bits: the Vue port of React Bits, installed one component at a time

A copy-in component catalogue, not an npm dependency

The most important thing to understand about vue-bits is that it is not a library you add to `dependencies`. The README describes it as a collection of animated Vue components that you install through a CLI, and it names the tool: jsrepo. The setup steps live on each component's page in the documentation at vue-bits.dev rather than in the README, which tells you the mental model already. You pick a component, run its install command, and the source arrives in your repository.

That is a fundamentally different contract from PrimeVue or Headless UI. Nothing is versioned for you, nothing is upgraded by a package manager, and every component you adopt is code you now own and maintain. The upside is equally real. There is no abstraction layer between your markup and the animation, no theme provider to configure, and no risk that a major version of someone else's package changes the visual output of your site.

The README is explicit that this is the official Vue port of React Bits, so if you have seen that catalogue the components will be recognisable. It also credits public code examples that were rewritten into reusable components, with a note that anyone who recognises their work can ask for credit. The repository is DavidHDev/vue-bits, at 4532 stars and 172 forks, with the last push on 2026-09-21 on the `main` branch, and the only open issue number is 1.

Ninety components covering text, motion, backgrounds and 3D

The README advertises 90 or more components across four families: text animations, general animations, components, and backgrounds. It describes them as enhanced with customization options passed as props, which is the detail that decides whether a component is usable or a demo. A component with one hardcoded animation is a screenshot; a component with props for duration, easing, delay and split behaviour is something you can actually ship.

The dependency list explains what the heavier members of the catalogue are built on. For text and 2D motion you have `gsap`, `motion-v`, `@vueuse/motion` and `lenis` for smooth scrolling. For the 3D and shader based backgrounds the list moves into `three`, `@tresjs/core`, `@tresjs/cientos`, `ogl`, `postprocessing`, `gl-matrix` and `vgpu`, plus `@webgpu/types` in devDependencies. Physics falls to `matter-js`, and icon work is split between `lucide-vue-next`, `vue-icons-plus` and the Hugeicons packages.

That inventory is the honest cost side of the project. A text animation is close to free. A shader background can add several megabytes of JavaScript to your bundle, and the `face-api.js` dependency suggests at least one component does real face detection in the browser. The README's claim that components have minimal dependencies is true relative to the ecosystem of component libraries, and it is less true for the graphics-heavy end of the catalogue.

The catalogue site is a Vite app with its own dependency weight

It helps to separate the library from the website that documents it. The vue-bits.dev site is a full Vue application with Vue Router, `vue-sonner` for toasts, `mathjs`, `@wdns/vue-code-block` for the syntax-highlighted snippets on each component page, and PrimeVue with `@primeuix/themes` for its own interface chrome. None of that ships to you when you install a component, but it does explain why the repository is shaped like an application.

The tree at the root confirms it: `src/`, `public/`, `index.html`, `vite.config.ts`, and TypeScript configs split across `tsconfig.json`, `tsconfig.app.json` and `tsconfig.node.json`. There is also a `wrangler.jsonc`, which means the documentation site deploys to Cloudflare Workers. Scripts in `package.json` show the workflow:

+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:registry && run-p type-check \"build-only {@}\" --",
+    "build:registry": "jsrepo build",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+

The `build:registry` step running `jsrepo build` is the one that matters for understanding the project. Every component is registered in a manifest so the CLI knows what can be installed and how to wire its dependencies. `.husky/` in the tree and a `prepare` script running husky mean git hooks are installed on clone, and `.prettierrc` and `eslint.config.ts` cover formatting and linting for contributors.

Tailwind 4 and TypeScript are assumed, not optional

The topics list Tailwind CSS explicitly, and the devDependencies carry `@tailwindcss/vite` at version 4 alongside `@tailwindcss/typography` and `autoprefixer`. Vue Bits is a Tailwind project. A component that assumes utility classes will not look right in a project using plain CSS or CSS modules without extra work, and the documentation pages are where you would find out whether a specific component is an exception.

TypeScript is the other assumption. The build script runs `vue-tsc --build` as part of `npm run build`, meaning a type error blocks a production build of the site. The project uses `@vitejs/plugin-vue` and `@vitejs/plugin-vue-jsx`, so components are authored as Vue single file components and rendered JSX where a component needs it. The `type: module` field in package.json confirms the ESM-only posture.

The repository also has `env.d.ts`, `jsrepo.config.ts` and a `scripts/` directory, and the package.json exposes a generator:

+    "new:component": "node scripts/generateComponent.js",
+

If you are a Vue developer working in TypeScript and Tailwind, all of this is unremarkable and the catalogue is pleasant to work with. If your project is JavaScript with scoped CSS, expect to spend time on each component rather than dropping it in.

MIT plus Commons Clause is not the same as MIT

The README states the license as MIT plus the Commons Clause, and the badge in the header spells it out as MIT+Commons Clause. That combination is worth understanding before you build a product on top of the collection, because the Commons Clause is the part that differs from a plain MIT grant.

In substance, the Commons Clause adds a restriction on selling the licensed work as a competing product. You can use these components in a commercial site, you can modify them freely, and you can put them inside an application you sell. What the clause restricts is distributing the components themselves, or a product whose value comes substantially from them, in a way that competes with the project.

For most people this is a non-issue. It becomes one if you are building a component library or a template product of your own, in which case the clause is exactly the situation it was written for. The full text is in LICENSE.md at the repository root and it is short enough to read before you ship.

The README also says donations go strictly towards hosting costs and nothing else, which is a nice piece of honesty about what the project is. There is a maintainer, David Haz, and a contributor route through the issue tracker, the Feature Request template and CONTRIBUTING.md.

Where the catalogue stops and the documentation begins

The README is short, and it is honest about it. It points to vue-bits.dev for the documentation, lists the key features, explains the CLI, and links to the contribution guide. It does not enumerate components, show a live demo of any of them, or document props. Every one of those things lives on the documentation site, and the README's own instruction is that setup steps are on each component's page.

That means evaluating vue-bits properly means reading the site rather than the repository. The repository is more useful for the questions a docs site will not answer: what the catalogue is built on, what the build and lint workflow looks like, how the jsrepo registry is generated, and what the license permits. The dependency list in `package.json` is arguably the single most informative file here, because it tells you the size of what you are about to install before you install anything.

There are no published GitHub releases for this repository, so the version in `package.json` is `0.0.0` and marked private, which is consistent with a catalogue rather than a publishable package. Version tracking for individual components is handled by the CLI and the registry, not by release tags.

Editorial conclusion

vue-bits is a good fit when you want one striking effect, a text animation or a 3D background, and you would rather own the source file than add a dependency. The copy-in model through jsrepo means every component is yours to edit, and the dependency lists in package.json show what the heavier pieces, the WebGL and physics ones, are likely to pull in. Two caveats are worth stating plainly. The catalogue is the product, so the value drops sharply the moment you only need two components, and the license is MIT plus the Commons Clause, which adds a restriction that plain MIT does not have. Start by installing a single text component, read what landed in your tree, and only then decide whether the catalogue is worth the dependency surface.

Frequently asked questions

Official sources

1. DavidHDev/vue-bits on GitHub
2. Issues
3. Project website
4. README