Skip to content
Vivek Kumar SinghVivek Kumar Singh
Hire

Topic

Modern Web Development

Front-end engineering with the App Router, React Server Components, TypeScript and the performance work that makes the difference between a demo and a product. These are patterns I use in production, including the ones I got wrong first.

If you are looking for framework tutorials there are better sources. These articles are about the decisions that follow once the tutorial ends.

45 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

Next.js

SSR Is Not Magic — The Mental Model That Finally Made It Click

Server-side rendering confused me longer than I'd like to admit. Not because the concept is hard, but because I kept trying to understand it through the wrong metaphor. This is the analogy that fixed it.

· 7 min read

Tooling

Turbopack: I Finally Understand What It's Doing (It's Elegant)

I'd been treating Turbopack as a black box that made builds faster. Then I actually read how it works. The demand-driven compilation model is one of the most thoughtful pieces of tooling I've studied.

· 7 min read

Next.js

Next.js App Router — 8 Months In, My Honest Assessment

I've shipped three production apps on App Router now. The wins are real. The sharp edges are also real. This is not a hype post — it's the review I wish I'd had before I started the first migration.

· 11 min read

Animation

Building Smooth Page Transitions (The Part Most Tutorials Skip)

Framer Motion is a powerful animation library for React. But the tutorials all show the simple stuff. The actual art of smooth page transitions is in the timing, easing, and knowing what not to animate.

· 7 min read

React

Redux Was Right for This Project. Until It Wasn't.

I'm not here to tell you Redux is dead. It isn't. But there's a specific moment in a project's lifecycle where it becomes more weight than support. I can now recognize that moment. Here's what it looks like.

· 7 min read

Animation

When Animations Hurt Your UX (And How to Know You've Gone Too Far)

The portfolio with motion on every single element isn't impressive — it's exhausting. There's a specific threshold where motion stops adding character and starts adding friction. Here's where I draw the line.

· 5 min read

React

Building a Component Library Your Team Won't Quietly Abandon

Most internal component libraries are created with good intentions and abandoned in six months. I've seen it twice. Here's what we did differently the third time — and the one decision that changed adoption.

· 9 min read

Next.js

Server Actions Are Wild — And I'm Completely Obsessed

I spent an hour convinced Server Actions were broken. Then I realized I had been misunderstanding the mental model entirely. After that hour, I rewrote half my forms and never looked back. Here's the model that unlocked it.

· 6 min read

CSS

Mastering Tailwind CSS for Complex, Responsive UIs

Tailwind's real power isn't the utility classes — it's the design constraint they enforce. Learn the advanced techniques that separate Tailwind beginners from developers who build genuinely great-looking UIs.

· 6 min read

React

The useCallback Trap — I Was Hurting Performance by 'Optimizing'

I added useCallback everywhere because I thought that's what good React devs do. Then the profiler showed me my callbacks themselves were the bottleneck. Memoization has a cost. Here's when it's worth paying.

· 5 min read

Three.js

Building 3D Portfolios With React Three Fiber — My Actual Process

The demos make it look simple. Reality involves camera positioning arguments, lighting decisions you'll change six times, performance budgets, and knowing when the 3D effect is helping vs just showing off.

· 10 min read

React

Why I Stopped Using useEffect for Data Fetching

Every time I wrote useEffect with a fetch inside, something broke. Race conditions, stale closures, double-firing in dev mode. There's a better pattern — and once you see it, you can't write the old way again.

· 6 min read

React

React Server Components Didn't Click Until I Drew This Diagram

I read the docs three times. Watched two conference talks. Still confused. Then I grabbed a whiteboard and drew the request lifecycle myself — and suddenly the whole thing snapped into place. Here's that diagram.

· 8 min read

React

Understanding React Server Components — A Deep Technical Dive

React Server Components allow you to render components on the server, resulting in faster page loads and improved SEO. Here's how they work under the hood and how to use them effectively in Next.js today.

· 8 min read

TypeScript

TypeScript Utility Types I Wish I'd Known on Day One

Partial, Required, Pick, Omit, Record, ReturnType. I used all of them for a year before I understood what they were actually doing under the hood. Now I reach for them before I even reach for a new interface.

· 8 min read

Performance

The LCP Fix That Took 20 Minutes and Should Have Taken 2

My LCP element was an image. The image had no explicit dimensions. No priority prop. Loading as a low-priority resource while holding up the entire paint. Classic. Embarrassing. Fixed.

· 4 min read

Tooling

The Developer Tools I Actually Open Every Single Day

Not a listicle of 50 tools you'll forget by tomorrow. Just the five things I genuinely open every day and would feel the absence of immediately if they disappeared from my machine.

· 5 min read

Animation

CSS Animations Are Fine. Framer Motion Changed My Mental Model.

I wasn't expecting a library to change how I think about UI. But Framer Motion's declarative, physics-based approach to motion made me realize I'd been thinking about animations wrong for three years.

· 6 min read

TypeScript

Stop Writing `any` in TypeScript — Here's What Actually Works

Every `any` is a vote against your future self. Here are the specific replacements I reach for when `any` feels tempting — including the genuinely tricky generic scenarios where most guides give up.

· 6 min read

TypeScript

TypeScript Caught My Bug Before It Hit Production — I Owe It an Apology

I resisted TypeScript for two years. Called it overhead. Called it unnecessary ceremony. Then it caught a null reference that would have crashed a client demo in front of 40 people. I haven't doubted it since.

· 5 min read

Performance

Font Loading Was Silently Killing My Core Web Vitals

My TTFB was fine. My server response was fast. But something was always making the page feel slow. Turned out it was a web font I'd imported 'just for the hero section' four months ago and never optimised.

· 6 min read

Three.js

Three.js Is Not as Scary as It Looks — A Reluctant Convert's Notes

I avoided Three.js for two years because every example looked like a WebGL screensaver from 2009. Then a client project gave me one weekend to learn it. Here's the shortcut through the steep part of the curve.

· 9 min read

Performance

My Portfolio Scored 38 on Lighthouse — Now It's 98

38 felt embarrassing for someone who calls himself a performance-conscious engineer. The fixes were less glamorous than I expected. Three of them took under 10 minutes each. One of them I'd been postponing for months for no reason.

· 8 min read

CSS

Tailwind CSS: I Hated It for 2 Weeks. Then I Understood It.

The class names felt wrong. The HTML felt cluttered. I kept wanting to go back to SCSS modules. Then I understood the constraint Tailwind was actually imposing — and I stopped fighting it and started benefiting from it.

· 6 min read

Tooling

Git Commands I Was Too Embarrassed to Google Until Recently

Everyone knows add, commit, push. But git reflog, git bisect, git cherry-pick — I was faking my way through those for longer than I'd like to admit. Let's fix that properly.

· 7 min read

Other topics

Zoho

22 articles

Generative AI

17 articles

Software Architecture

21 articles

VivekUI

20 articles

Consulting & Career

12 articles