React Form Components: Accessible Fields, Zod and Mobile
React form components that share one anatomy (label, hint, error, counter), plug into react-hook-form and zod, and behave right on a phone, with full code.
React form components that share one anatomy (label, hint, error, counter), plug into react-hook-form and zod, and behave right on a phone, with full code.
Fix dnd kit mobile drag: a TouchSensor long press that still lets the page scroll, touch-action per element, the iOS Safari resize cancel and a tap path.
Update shadcn components without losing edits: what shadcn diff and add --diff show, why a 2-way diff hides whose change is whose, and how a 3-way merge works.
IBAN validation JavaScript that catches typos: mod 97 in TypeScript, why a regex is not enough, a React field that formats as you type and Romanian banks.
Build a React command palette that binds Cmd+K on a Mac and Ctrl+K elsewhere, with nested pages, async results, recents and a full-height sheet on phones.
How to build a React OTP input that takes paste and SMS autofill, why autocomplete one-time-code fails silently, and how to add zod checks and a resend timer.
Build a Romanian CNP validator in TypeScript: the weighted check digit, real birth dates, the new county code 70, a zod rule, a React field and safe storage.
Romanian CUI validation in TypeScript: the 753217532 check digit step by step, the RO prefix, a zod rule, a React field and a company lookup at ANAF.
Build an admin data table on TanStack Table v9: tableFeatures setup, column filters, bulk actions, start and end pinning, server pagination and phone cards.
Each guide explains when the component is the right choice and when another one fits better, which props you will actually change, how it behaves with a keyboard and a screen reader, what it does on a phone, and the mistakes that show up in production. The code uses the real API of the Wingo UI component it describes, written in TypeScript for React 19 and Tailwind CSS v4, so you can copy it into a Next.js project and run it.
Most guides include a live demo in the page. Many of the components are free, and every guide says plainly whether the component needs a Pro plan, so you know what you can install before you start.
How to build React interfaces that feel native on phones: bottom sheets, touch targets, safe areas and tables that turn into cards.
10 posts
Practical guides for building React UI with Claude Code, Cursor and Codex: MCP servers, rules files, llms.txt and component registries.
4 posts
Honest, dated comparisons of React component libraries and tools, with sources, prices and a clear pick for each use case.
3 posts
Guides to Next.js App Router, React 19 and Tailwind CSS v4 for people who build and maintain UI components and design systems.
3 posts
Step by step tutorials that build real React screens and apps, from sign in and settings to admin dashboards, with every screen working on phones.
1 post
No spam. Unsubscribe at any time.