Mobile First React Regel für Regel, mit Code: Bottom Sheets statt Popover, 44px Touch-Ziele, Safe Areas, dvh, Leisten über der Tastatur, Tabellen als Karten.
So baust du ein React Action Sheet wie unter iOS: rote Zeilen zum Löschen, Abbrechen in eigener Karte, show() mit await für async Aktionen, ab 768px ein Dialog.
So baust du einen React Collapsing Header: die Übergabe beim iOS Large Title und einen Parallax-Foto-Hero, gesteuert über Motion Values statt Re-Renders.
Ein React Floating Action Button für den Daumen: Speed Dial mit 2 bis 6 Aktionen, einklappendes Label und Platz über Tab-Leiste und Home-Indikator.
So baust du React Swipeable Tabs mit nativem Scroll Snap: Der Indikator folgt dem Finger, vertikales Scrollen wechselt nie den Tab, mit Tastatur, ohne Altlast.
Fix für iOS Safari Tastatur position fixed: Miss die Tastatur per visualViewport und heb Chat-Composer oder Bottom Sheet per Motion Value über die Tasten.
Native App Feeling auf dem Handy: 12 Details für deine Web App, von sofortigen Taps über Action Sheets und wischbare Tabs bis zu Haptik und Large Titles.
Wann ein React Slide to Confirm bei unumkehrbaren Aktionen besser ist als ein Bestätigungsdialog und wie er mit Tastatur und Statusansagen barrierefrei bleibt.
So baust du React Swipe Cards wie bei Tinder: Neigung und Stempel auf Motion Values, ein Wurf mit deinem Tempo, Undo, Buttons und Tasten für alle ohne Swipe.
React Swipe to Delete für Listenzeilen: iOS-Swipe-Actions, ein Full Swipe zum Löschen, Undo per Toast und Buttons für alle mit Maus oder Tastatur.
Tailwind Touch Manipulation: welche touch-action-Utility Button, Slider, Swipe-Zeile und Sheet jeweils brauchen und welche Tap- und Zoom-Bugs sie beheben.
100vh mobile Bug erklärt: warum h-screen deine Bottom Bar versteckt, wann du dvh, svh oder lvh in Tailwind nimmst und wie eine Leiste über der Tastatur bleibt.
React Bottom Navigation Bar in Next.js: 3 bis 5 Tabs, Safe Areas, Badges, die Screenreader vorlesen, Ausblenden beim Scrollen und wann die Sidebar besser passt.
So baust du ein React Bottom Sheet fürs Web mit vaul: Snap Points, Drag to Dismiss, verschachtelte Sheets, Bildschirmtastatur und Home-Indikator, mit Code.
So baust du React Pull to Refresh für eine PWA: overscroll-behavior, Gummiband-Widerstand, iOS-Speichen oder Material-Ring, haptischer Tick, Refresh-Button.
React PWA Install Prompt in Next.js: beforeinstallprompt in Chrome und Edge abfangen, auf dem iPhone „Zum Home-Bildschirm“ zeigen und wissen, wann Fragen stört.
Ein React Segmented Control mit ziehbarem iOS-Thumb, 44px Touch-Zielen und Radio-Semantik. Dazu: wann Tabs, Toggle Group oder Radio Cards besser passen.
So baust du einen React Wheel Picker auf einem nativen Snap-Scroller: iOS-Schwung, Zeilen auf einem 3D-Zylinder, Sheet am Handy, Textfeld am Desktop, Tastatur.
Responsive Tabelle fürs Smartphone: wann Zeilen unter 768px zu Karten werden, welche Spalten bleiben und wie Sortieren und Sammelaktionen ohne Kopfzeile gehen.
Bau einen shadcn responsive dialog nur einmal: zentrierte Karte ab 768px, ziehbares Bottom Sheet darunter, ein einziger Inhalt und kein Hydration-Flackern.
Tailwind Safe Area in v4: viewport-fit=cover aktivieren, Leisten Padding aus env(safe-area-inset-bottom) geben, FABs und Toasts vom Home-Indikator fernhalten.
Minimale Touch Target Größe nach WCAG 2.2 (24 und 44px), iOS (44pt) und Android (48dp), plus 44px Taps in React und Tailwind, ohne den Desktop aufzublähen.
Web Vibration API 2026: navigator.vibrate auf Android, der iPhone-Switch-Tick, den iOS 26.5 auf echte Taps begrenzt, und ein React-Helper, der still scheitert.
Die Artikel hier sind praktisch und konkret. Sie zeigen, wann ein Popover zum Bottom Sheet werden sollte (wir wechseln unter 768px), wie Touch-Ziele bei groben Zeigern 44px groß bleiben, ohne das Desktop-Layout aufzublähen, wie fixierte Leisten mit Safe Area Insets Abstand zur Notch und zum Home-Indikator halten und warum Layouts in voller Höhe dvh statt 100vh nutzen sollten. Dazu kommen Muster für Daten, die nicht auf ein Smartphone passen, etwa Tabellen, die zu Karten werden, und für Gesten wie Drag to Dismiss und Pull to Refresh.
Jeder Guide nutzt echte Komponenten aus der Wingo UI Bibliothek, mit Live-Demos, die du direkt auf der Seite ausprobierst, und Code zum Kopieren in dein eigenes Projekt.
Praxisnahe Guides für React-UI mit Claude Code, Cursor und Codex: MCP-Server, Rules-Dateien, llms.txt und Komponenten-Registries.
13 Artikel
Guides zu einzelnen React-Komponenten: wann du welche nutzt, die wichtigen Props, Barrierefreiheit, Verhalten auf dem Smartphone und typische Fehler.
57 Artikel
Ehrliche, datierte Vergleiche von React-Komponentenbibliotheken und Tools, mit Quellen, Preisen und einer klaren Empfehlung für jeden Anwendungsfall.
14 Artikel
Guides zu Next.js App Router, React 19 und Tailwind CSS v4 für alle, die UI-Komponenten und Designsysteme bauen und pflegen.
11 Artikel
Schritt-für-Schritt-Tutorials für echte React-Screens und Apps, von Anmeldung und Einstellungen bis zum Admin-Dashboard, jeder Screen auch auf dem Smartphone.
17 Artikel
Kein Spam. Du kannst dich jederzeit abmelden.