Skip to content
Vivek Kumar SinghVivek Kumar Singh
Hire

Topic

VivekUI — Open-Source React Component Library

VivekUI is an open-source React component library I build and maintain: 91 accessible components, 6 pure-SVG charts and 12 page templates, published to npm under MIT with no runtime dependencies at all. One install, one CSS import, no Tailwind and no config.

These articles cover installing it, the architecture decisions behind it, and honest comparisons against shadcn/ui, MUI and Chakra — including the trade-offs that go the other way. Where the library has a weakness, the articles say so.

20 articles by Vivek Kumar Singh

React component library code on screen showing composable UI components
VivekUI

VivekUI: A Free React Component Library With Zero Dependencies

91 accessible React components, 6 pure-SVG charts and 12 page templates, with no runtime dependencies at all. One install, one CSS import, no Tailwind and no config. Here is what VivekUI is, who it is for, and where it deliberately does not compete.

· 9 min read

VivekUI

How to Install VivekUI in Next.js App Router (and Pages Router)

A complete setup walkthrough: installing the package, the single CSS import and where it goes, the first component, and the three mistakes that account for almost every setup issue. Works in React 18 and 19.

· 8 min read

VivekUI

VivekUI vs shadcn/ui: A Dependency or a Copy-Paste Kit?

shadcn/ui hands you the source and the maintenance with it. VivekUI is a normal npm dependency you update. An honest comparison of both models, including the cases where copy-paste genuinely wins.

· 10 min read

VivekUI

VivekUI vs MUI and Chakra: What Zero Runtime Dependencies Buys You

MUI ships Emotion, Chakra ships styled-components. VivekUI ships nothing but React as a peer. What that actually changes for bundle size, server rendering and upgrade pain — and what you give up.

· 10 min read

VivekUI

Build a Complete Landing Page in 2.7 kB With VivekUI Sections

Hero, FeatureGrid, Pricing, FAQ, CTA and Footer are installable components, not snippets you hand-write. The whole page costs 2.7 kB brotlied. Here is the full build, section by section.

· 9 min read

VivekUI

React Server Components: Why 49 of 91 VivekUI Components Need No 'use client'

Most component libraries put 'use client' at the top of the barrel file and push your whole tree to the client. VivekUI ships unbundled so each file keeps its own directive, and CI asserts it on every build.

· 10 min read

VivekUI

Theming VivekUI With CSS Custom Properties — No Tailwind Config

Theming is plain CSS custom properties, so you change a colour by setting a variable, not by learning a theme object or editing a Tailwind config. Overrides win with zero specificity fights.

· 8 min read

VivekUI

Dark Mode Without the Flash: How VivekUI's Theme Script Works

The white flash before dark mode applies is a rendering-order problem, not a CSS problem. How createThemeScript solves it, why it must run before paint, and how to wire it in the App Router.

· 8 min read

VivekUI

DataTable in VivekUI: Sort, Search, Paginate and Select Rows

A batteries-included table with client-side sort, search, pagination and row selection — plus controlled escape hatches so you can move any of it server-side when your data outgrows the browser.

· 10 min read

VivekUI

EditableGrid: The ARIA Grid Model and Why One Tab Stop Matters

An input per cell turns a 20x8 spreadsheet into 160 tab stops. The ARIA grid pattern gives the whole grid one tab stop and moves with arrow keys. This is the part most libraries skip.

· 10 min read

VivekUI

KanbanBoard With Real Keyboard Drag-and-Drop

HTML5 drag-and-drop has no keyboard equivalent at all, which is why most Kanban boards are unusable without a mouse. VivekUI ships two complete input paths, the second announced through a live region.

· 9 min read

VivekUI

VirtualList: 50,000 Rows, 12 in the DOM, Honest Screen Reader Counts

Virtualisation is easy to get visually right and easy to get wrong for assistive technology. If aria-posinset and aria-setsize describe the window instead of the dataset, a screen reader hears 'of 12'.

· 9 min read

VivekUI

Six SVG Charts With No Charting Library

LineChart, AreaChart, BarChart, PieChart, Sparkline and ProgressRing in 8.3 kB total, as pure inline SVG. Each renders a real table fallback and never encodes a series by colour alone.

· 9 min read

VivekUI

Building an AI Chat UI With ChatThread, ChatMessage and ChatInput

Streaming model output into a transcript involves more than appending divs: announcement timing, code blocks, and the rule that model output must never become markup. Here is the full build.

· 10 min read

VivekUI

Accessible Forms in VivekUI: How Field Owns the ARIA Wiring

Label association, error announcement and describedby wiring are the parts of form accessibility everyone re-implements and half get wrong. Field does it once so every input inherits it.

· 9 min read

VivekUI

Modal and Drawer Done Properly: Focus Trap, Scroll Lock, Inert

A dialog that does not trap focus is a dialog a keyboard user falls out of. The four things a correct modal must do, why scroll lock must not shift layout, and what inert is actually for.

· 9 min read

VivekUI

Bundle Size, Honestly: A 771-Byte Button and the CSS Trade-Off

Real size-limit numbers for VivekUI, including the one that is not flattering: the CSS is a single stylesheet, so a five-component app still downloads all 27 kB gzipped. Here is why that trade was made.

· 8 min read

VivekUI

Security in a Component Library: href Validation and CSV Injection

React 18 renders a javascript: URL verbatim, so a CMS-fed link is a stored-XSS vector. And a CSV cell starting with = can execute in Excel. Two real attack paths a UI library should close for you.

· 9 min read

VivekUI

Hydration-Safe Clocks, Countdowns and Counters

Anything that reads the clock during render produces different HTML on server and client, and React tells you about it in the console. How Clock, Countdown and AnimatedCounter avoid it by design.

· 8 min read

VivekUI

Migrating From Tailwind and Radix to VivekUI

A staged migration that does not require a rewrite: run both side by side, replace by surface area, and delete the build plumbing last. Including an honest list of what you will miss.

· 10 min read

Other topics

Zoho

22 articles

Generative AI

17 articles

Software Architecture

21 articles

Web Development

45 articles

Consulting & Career

12 articles