Mobile-first React components, rule by rule: bottom sheets instead of popovers, 44px touch targets, safe areas, dvh, keyboard-aware bars and tables as cards.
The 100vh mobile bug explained: why h-screen hides your bottom bar, when to use dvh, svh or lvh in Tailwind, and how to keep a bar above the keyboard.
Minimum touch target size per WCAG 2.2 (24 and 44px), iOS (44pt) and Android (48dp), and how to get 44px taps in React and Tailwind without desktop bloat.
Build a React bottom navigation bar in Next.js: 3 to 5 link tabs, safe areas, badges screen readers announce, hide on scroll, and when a sidebar fits better.
Build a React bottom sheet for the web on vaul: snap points, drag to dismiss, nested sheets, the on-screen keyboard and the home indicator, with working code.
Build a React pull to refresh for a PWA: overscroll-behavior, rubberband resistance, iOS spokes or a Material ring, a haptic tick and a refresh button.
Build a React PWA install prompt in Next.js: catch beforeinstallprompt in Chrome and Edge, show Add to Home Screen steps on iPhone, and know when not to ask.
Build a shadcn responsive dialog once: a centered card above 768px, a draggable bottom sheet below it, one copy of the content and no hydration flash.
A Tailwind safe area guide for v4: opt in with viewport-fit=cover, pad bars with env(safe-area-inset-bottom) and keep FABs and toasts off the home indicator.
The Web Vibration API in 2026: navigator.vibrate on Android, the iPhone switch tick that iOS 26.5 limits to real taps, and a React helper that fails quietly.
The posts here are practical and specific. They show when a popover should become a bottom sheet (we switch below 768px), how to keep touch targets at 44px on coarse pointers without bloating the desktop layout, how to keep fixed bars clear of the notch and the home indicator with safe area insets, and why full-height layouts should use dvh instead of 100vh. You will also find patterns for data that does not fit a phone, such as tables that turn into cards, and for gestures like drag to dismiss and pull to refresh.
Every guide uses real components from the Wingo UI library, with live demos you can try in the page and the code to copy into your own project.
Practical guides for building React UI with Claude Code, Cursor and Codex: MCP servers, rules files, llms.txt and component registries.
4 posts
Deep guides to single React components: when to use each one, the props that matter, accessibility, mobile behavior and common pitfalls.
9 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.