Search

44 results

Sort by:

Building a Badge Component — Variants, Sizes, and Dot Indicators

Muhammad Athar·April 3, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

Badge is the first purely presentational primitive in this series — no form integration, no event handling, no focus management. That simplicity is deceptive. A Badge that looks right in isolation often breaks inside a nav item, a table cell, or an avatar. The decisions that make it composable are worth getting right now.

accessibilityformsreact

Building a Label Component That Actually Connects to Its Field

Muhammad Athar·April 3, 2026·3 min read·Building a React UI Library from Scratch

We've referenced a Label component in every form field article so far without building it. That's intentional — you need to understand what the Label connects to before you understand what it needs to do. Now that we have Input, Textarea, Checkbox, RadioGroup, Select, and Toggle, the Label's job is clear: it's not just styled text. It's the accessible name of a form field, and it carries required indicators, optional markers, and disabled state as part of that responsibility.

accessibilityformsreact

Building a Toggle / Switch Component from Scratch

Muhammad Athar·April 3, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

Toggle and Checkbox look similar but mean different things. A Checkbox records a choice in a form — you submit it later. A Toggle applies an effect immediately — dark mode on, notifications off, feature enabled. That semantic difference changes the HTML element, the ARIA role, and the user's expectation of what happens when they interact with it.

accessibilityformsreact

Building a Select Component — When to Use Native and When to Go Custom

Muhammad Athar·April 3, 2026·4 min read·Intermediate·Building a React UI Library from Scratch

The Select is the component where most UI libraries make a hard choice and then pretend it was easy. Native select elements are accessible and mobile-friendly but nearly impossible to style. Custom selects look great but carry the full weight of keyboard navigation, screen reader support, and focus management. We're building both — and being honest about when each one is the right call.

accessibilityformsreact

Building a Radio Group Component with Keyboard Navigation

Muhammad Athar·April 3, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

A group of radio inputs is not just a list of checkboxes that only allow one selection. It's a distinct ARIA pattern with its own keyboard contract — arrow keys move between options, Tab moves out of the group entirely. Get this wrong and keyboard users are stuck tabbing through every option one by one. Get it right and the group behaves exactly as assistive technology and keyboard users expect.

accessibilityformsreact

Building a Checkbox Component — Custom Styles Without Losing Native Behaviour

Muhammad Athar·April 3, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

Custom checkboxes are where most UI libraries make their first real accessibility mistake. They replace the native input with a styled div, wire up click handlers, and forget about keyboard navigation, screen readers, and the indeterminate state. We're keeping the native input and styling around it — all the customisation, none of the accessibility regressions.

accessibilityformsreact

Building a Textarea Component That Grows with Its Content

Muhammad Athar·April 2, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

A fixed-height textarea is one of those small friction points that quietly frustrates users. They type more than the box holds, lose sight of what they wrote, and start scrolling inside a tiny rectangle. Auto-resize solves this in about ten lines — but there are a few details that make the difference between a resize that feels native and one that jumps around.

cssdesign tokensreact

Building a Design Token System with CSS Custom Properties and Tailwind v4

Muhammad Athar·April 2, 2026·4 min read·Intermediate·Building a React UI Library from Scratch

Hardcoded colors feel fine when you're building for yourself. The moment someone else installs your library, they become a problem — every component locked to your brand's blue, with no clean way to change it. CSS custom properties fix this at the root. Set them up once and every component in the library becomes themeable for free.

accessibilityformsreact

Building an Input Component with Validation States and Accessibility Built In

Muhammad Athar·April 2, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

A plain HTML input gets you 20% of the way there. The other 80% is validation states, error messages, label connections, ref forwarding, and accessibility attributes that most implementations bolt on as an afterthought. We're building all of it into the component from the start.

changelognpmreact

Versioning and Changelogs for a UI Library — How to Do It Without Embarrassing Yourself

Muhammad Athar·April 1, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

Versioning is a contract with your consumers. Break the contract silently and they'll stop trusting your library. Break it loudly — with a clear changelog and a predictable version number — and they'll upgrade with confidence. Here's how to do it right from the first release.

npmpublishingreact

Publishing Your First React Component to npm — the Complete Setup

Muhammad Athar·March 31, 2026·4 min read·Intermediate·Building a React UI Library from Scratch

Most tutorials stop at "it works on my machine." This one doesn't. Publishing to npm is where your library becomes real — installable, versioned, and usable by anyone. Here's the complete setup, including the fields most developers get wrong in package.json and how to inspect what you're actually shipping before it goes live.

accessibilityreacttailwind

Building a Button Component That Handles Every Real-World Variant

Muhammad Athar·March 31, 2026·4 min read·Intermediate·Building a React UI Library from Scratch

The Button is the first component every UI library builds and the one most libraries get wrong. Not because buttons are hard — because the naive implementation handles the happy path and nothing else. Loading states, disabled behavior, icon composition, and rendering as a link all require deliberate decisions. Here's how to make them once and never revisit them.

architecturereacttypescript

How to structure a UI library that scales — folders, exports, and naming conventions

Muhammad Athar·March 31, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

The folder structure you pick on day one is the one you'll live with across 40 components. Get it wrong and you'll be fighting your own codebase by article 10. Get it right and adding a new component takes five minutes and follows a pattern every contributor can learn in one sitting.

reacttailwindtypescript

Setting Up a React Component Library with Vite, TypeScript, and Tailwind v4

Muhammad Athar·March 31, 2026·3 min read·Intermediate·Building a React UI Library from Scratch

Before you write a single component, the project needs to be set up correctly — or you'll be fighting the build config the entire series. This article covers everything: Vite in library mode, TypeScript strict config, Tailwind v4, CVA, and a working entry point you can build and inspect.

reacttailwindtypescript

Why I'm Building My Own React UI Library — and Why You Should Too

Muhammad Athar·March 31, 2026·4 min read·Intermediate·Building a React UI Library from Scratch

Most developers have installed shadcn/ui or MUI, grabbed the components they needed, and moved on. That works — until it doesn't. This series is about building a React UI library from scratch, shipping it to npm, and actually understanding what you've built.

cssweb

CSS Cascade Layers: The Feature That Finally Fixes Specificity Wars

Sena Aruoba·January 24, 2026·4 min read·Intermediate·CSS Design Systems

Specificity conflicts with third-party CSS, utility classes, and component styles are one of the most frustrating parts of scaling a CSS codebase. @layer doesn't just help — it fundamentally changes how the cascade works. Here's the mental model and the setup that makes it click.

reactweb

How to Build a Component Library with Proper Versioning

Alex Chen·January 23, 2026·5 min read·Intermediate·React Foundations

Building a component library is easy. Building one that other developers can depend on — with proper exports, peer dependencies, versioning, and a changelog — is not. This is the complete setup that gets it right from day one.

reactweb

Strict Mode in React 18: What It Breaks and Why That's Good

Alex Chen·January 22, 2026·5 min read·Intermediate·React Foundations

React 18's strict mode double-invokes effects by design. Most developers disable it when it starts breaking things. That's the wrong response — the break is a signal, not a false alarm. Here's what strict mode actually does and why every bug it surfaces is a real bug.

reactweb

How to Manage Global State Without a Library

Alex Chen·January 21, 2026·3 min read·Intermediate·React Foundations

You don't always need Zustand or Redux. Before reaching for a state management library, understand what the platform gives you — useSyncExternalStore is React's built-in primitive for subscribing to any external store. Here's how to use it to build a lightweight global state system from scratch.

reactweb

The Render Props Pattern Is Not Dead — Here's Where It Still Wins

Alex Chen·January 20, 2026·4 min read·Intermediate·React Foundations

Hooks replaced most render props use cases in 2019. Most — not all. There are three scenarios where render props still outperform hooks and compound components. Here's what they are and how to implement them cleanly.

Showing 1 - 20 of 44 posts

Search

Building a Badge Component — Variants, Sizes, and Dot Indicators

Building a Label Component That Actually Connects to Its Field

Building a Toggle / Switch Component from Scratch

Building a Select Component — When to Use Native and When to Go Custom

Building a Radio Group Component with Keyboard Navigation

Building a Checkbox Component — Custom Styles Without Losing Native Behaviour

Building a Textarea Component That Grows with Its Content

Building a Design Token System with CSS Custom Properties and Tailwind v4

Building an Input Component with Validation States and Accessibility Built In

Versioning and Changelogs for a UI Library — How to Do It Without Embarrassing Yourself

Publishing Your First React Component to npm — the Complete Setup

Building a Button Component That Handles Every Real-World Variant

How to structure a UI library that scales — folders, exports, and naming conventions

Setting Up a React Component Library with Vite, TypeScript, and Tailwind v4

Why I'm Building My Own React UI Library — and Why You Should Too

CSS Cascade Layers: The Feature That Finally Fixes Specificity Wars

How to Build a Component Library with Proper VersioningFeatured

Strict Mode in React 18: What It Breaks and Why That's Good

How to Manage Global State Without a Library

The Render Props Pattern Is Not Dead — Here's Where It Still Wins

How to Build a Component Library with Proper Versioning