Series Overview
Build production UI and forms in Next.js: data tables with TanStack, React Hook Form, Zod validation, Server Actions, multi-step wizards, and UI component patterns with shadcn/ui.
All Articles in Series

Complete Data Table with TanStack Table in Next.js
Step-by-step implementation of a sortable, filterable, paginated data table using TanStack React Table and shadcn/ui…
Learn to build a fast, accessible Data Table with TanStack Table and shadcn/ui in Next.js — sortable columns, column filters, pagination, and custom cell…

React Hook Form Multi-Step Tutorial: Zustand + Zod + Shadcn
Complete guide to building production-ready React multi-step forms with validation, state management, and conditional logic

The Invisible Form Bug: React 19 + React Hook Form's Hidden Compatibility Issue
That toggle that worked perfectly in React 18 now does nothing when clicked? You're not alone—and the fix isn't in any migration guide.

Capture Signatures in React with React Signature Canvas
Build a reusable signature capture flow with validation and persistence using React Hook Form and Zustand.
Learn how to implement a legal signature capture flow in React using react-signature-canvas, including validation and data persistence strategies.

My Approach to Building Forms with useActionState and Server Actions in Next.js 15
A practical pattern for leveraging useActionState and server actions for consistent form handling
Learn how to structure server actions and forms for consistent CRUD operations using React 19's useActionState hook, with reusable components and predictable state management.

Next.js Contact Form: Zod, useActionState & Sonner
Build a resilient Next.js contact form with Zod v4, reCAPTCHA, server actions and Sonner toast feedback.
Learn how to build a resilient Next.js contact form with Zod v4, useActionState, reCAPTCHA and Sonner toasts—complete validation, email flow, and clear user…

How to Add reCAPTCHA v3 to Your Next.js 15.5 Contact Form Without Breaking Anything
Implement invisible bot protection while preserving existing form functionality
Add enterprise-level reCAPTCHA v3 security to your Next.js contact forms without disrupting React Hook Form, internationalization, or existing validation patterns.

shadcn Table vs Data Table: When to Choose TanStack
Practical Next.js guide comparing shadcn/ui Table and a TanStack-powered Data Table — when to keep simple markup and…
Compare shadcn Table vs Data Table to decide whether to keep a small display table or adopt TanStack Table for sorting, filtering, pagination and…