VivekUI: A Free React Component Library With Zero Dependencies

Every free React library gives you a button and a modal. The pieces that are missing are the ones you hit when you try to finish an actual product: a spreadsheet grid people can type into, a scheduler, a Kanban board, a real treeview, a virtualised list. They are missing for a consistent reason — doing them properly means writing a keyboard model, and that is the part almost everyone skips.

The second gap is assembly. Primitives are everywhere, but building a landing page still means hand-writing the pricing table, the FAQ and the feature grid every single time. VivekUI ships those as installable components, plus twelve complete page templates you can copy: landing, pricing, dashboard, checkout, sign in, settings, blog, product, contact and more.

The package has no runtime dependencies. Not a small number — none. `react` and `react-dom` are peer dependencies at `^18 || ^19` and are never bundled, so you cannot end up with two copies of React and the duplicate-hooks errors that follow. You can verify the claim yourself with `npm ls --omit=dev @the_viveksingh/vivek-ui`, and CI asserts it on every release.

This matters more than it sounds. A library that pulls in Emotion, styled-components, Radix, CVA and clsx is not just bigger — it is five more upgrade paths, five more sets of peer-dependency warnings, and five more things that can break when React ships a major version. Removing them is a maintenance decision as much as a size one.

There is no CLI, no config file, no PostCSS plugin, no Babel plugin and no required provider. You install the package, import the stylesheet once at your entry point — `app/layout.tsx` in the App Router, `pages/_app.tsx` in the Pages Router, `src/main.tsx` in Vite — and then import components anywhere.

That constraint shaped the architecture. Because there is no build step to generate styles, theming is plain CSS custom properties rather than a Tailwind config or a JavaScript theme object. You change a colour by setting a variable, which works in a stylesheet, in a `<style>` tag, or inline on a wrapper.

49 of the 91 components carry no `'use client'` directive and render directly inside React Server Components. Only the genuinely interactive ones declare it, and they declare it per file rather than at the top of a barrel.

This is an architectural choice, not a happy accident: the build is deliberately unbundled so every file keeps its own directive in both the ESM and CJS output, and CI asserts on each build that the client files still carry theirs. Libraries that bundle into a single entry file usually cannot do this — one `'use client'` at the top means importing a `Badge` drags your whole tree across the client boundary.

Every component ships with automated `axe` assertions, and the API is designed so the accessible thing is the one that happens by default. `IconButton` requires `aria-label` at the type level, so an icon-only control cannot ship nameless. `RadioGroup` is a real `<fieldset>` with a `<legend>`. `Divider` is an `<hr>`. `FAQ` is native `<details>`. `Alert` picks `role="alert"` for urgent tones and `role="status"` otherwise, so it does not talk over the user.

One gap is stated openly in the README rather than buried: colour contrast is reasoned, not machine-verified, because axe's contrast rule cannot run without a real browser. A Playwright pass is on the roadmap. I would rather you know that going in than discover it during an audit.

If your team already runs Tailwind well and has a design system built on it, this is not a reason to migrate. If you need a component that is not in the catalogue, a headless library plus your own styles will beat waiting on someone else's roadmap. And if you need enterprise support contracts, a solo open-source project is the wrong risk profile.

Where it does fit: shipping a real product quickly without spending the first week on build configuration, projects that want Server Components to actually work, and teams that would rather run `npm update` than re-copy a dozen files by hand.