# Die beste React Mobile UI Library 2026: 9 im Vergleich
> Welche React Mobile UI Library passt 2026? 9 Bibliotheken bei 390px geprüft: Bottom Sheets, Touch-Ziele, Safe Areas und Gesten, mit klaren Empfehlungen.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 9. Okt. 2026
- Kategorie: [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons)
- Lesezeit: 12 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/best-react-component-library-for-mobile
- Englische Fassung: https://wingo-ui.com/blog/best-react-component-library-for-mobile
## Kurz gesagt
Für eine React-Web-App, die Leute auf Smartphone und Desktop nutzen, nimmt dir Wingo UI am meisten Arbeit ab: Selects, Popover, Menüs und Dialoge öffnen sich unter 768px als ziehbare Bottom Sheets, und die Buttons wachsen bei Touch auf 44px. Für eine reine Mobile-App oder einen Capacitor-Build mit nativem iOS- oder Material-Look ist Ionic React die stärkere Wahl, mit Framework7 und antd-mobile als Alternativen. MUI, shadcn/ui, HeroUI und Mantine sehen auf einem 390px-Screen gut aus, überlassen dir aber das meiste Verhalten auf dem Smartphone, von Sheets bis Safe Areas.
Welche React Mobile UI Library die beste ist, entscheidet sich daran, was jede Komponente auf dem Smartphone tut. Dieser Vergleich gilt für React-Web-Apps: eine Next.js-App, die Leute im Browser auf dem Smartphone öffnen, zum Home-Bildschirm hinzufügen oder in Capacitor ausliefern. Kits für React Native sind hier kein Thema. Vier Punkte entscheiden: was ein Select oder Menü auf einem 390px-Screen öffnet, wie groß die Ziele unter dem Daumen sind, ob fixierte Leisten Notch und Home-Indikator freilassen und welche Gesten funktionieren. Wir haben neun Bibliotheken am 9. Oktober 2026 auf diese vier Punkte geprüft.
Wir bauen Wingo UI, eine der neun. Lies diesen Artikel also als Vergleich eines Anbieters. Er belegt alles mit Quellen und nennt auch die Fälle, in denen eine andere Bibliothek die bessere Wahl ist. Wenn du von einer allgemeinen Liste „beste React UI Library 2026“ kommst: Dieser Vergleich ist enger und bewertet nur, was auf dem Smartphone passiert. Allgemeinere Gegenüberstellungen findest du unter [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons), und unser [Guide zu shadcn-Alternativen](https://wingo-ui.com/de/blog/shadcn-alternatives) vergleicht Preise, Lizenzen und MCP-Support.
## Welche React Mobile UI Library ist die beste?
Wingo UI, wenn dieselbe App auf Smartphones und Desktops funktionieren muss, und Ionic React, wenn die App nur fürs Smartphone gedacht ist und nativ aussehen soll. Die übrigen Bibliotheken passen zu spezielleren Fällen.
- **Smartphone und Desktop aus einer Codebasis, Tailwind CSS, Quellcode in deinem Repository:** Wingo UI. Overlays werden unter 768px zu Bottom Sheets, Controls werden bei Touch größer. Das Verhalten auf dem Smartphone steckt also schon in jeder Komponente.
- **Eine reine Mobile-App oder ein Capacitor-Build mit nativem Look:** Ionic React. Es deckt jedes Smartphone-Muster in diesem Vergleich ab und wählt iOS- oder Material-Styling je nach Plattform.
- **Dieselbe Idee außerhalb des Ionic-Ökosystems:** Framework7 React, mit eigener App Shell und eigenem Router.
- **Eine reine Mobile-App aus der Ant-Design-Familie:** antd-mobile.
- **Tailwind-Klassen mit iOS- oder Material-Look, in einer Ionic- oder Framework7-Shell:** Konsta UI.
- **Ein Desktop-first-Produkt, das auch auf dem Smartphone funktionieren muss:** MUI hilft unter den Allzweck-Paketen am meisten auf dem Smartphone. shadcn/ui, HeroUI und Mantine funktionieren auch, du musst aber mehr selbst verdrahten.
## Wie haben wir die Bibliotheken bei 390px getestet?
Wir haben die Doku-Demos jeder Bibliothek in Chromium über Playwright bei 390 mal 844 Pixeln geöffnet, mit Touch-Emulation, sodass `(pointer: coarse)` wie auf einem Smartphone griff. Auf jeder Website haben wir den Standard-Button gemessen und auf die erste Select-Demo getippt, um zu sehen, was sich öffnet und wie hoch die Zeilen sind. Die Doku von Ionic und Framework7 hat unseren Headless-Browser blockiert. Für diese beiden und für Konsta UI stammen die Zahlen deshalb aus Quellcode und Doku auf GitHub. Die Versionen sind die neuesten auf npm am 9. Oktober 2026.
Dabei gibt es zwei Einschränkungen. Doku-Demos nutzen das jeweilige Theme der Website, was bei shadcn/ui ins Gewicht fällt, denn dort hängt die Button-Größe vom gewählten Style ab. Und Emulation ist kein iPhone: Es gibt keinen Home-Indikator, keine Bildschirmtastatur und keine einklappende Toolbar. Safe Areas haben wir deshalb im Quellcode jeder Bibliothek geprüft statt auf dem Bildschirm. Unser [Guide zu Mobile First React Komponenten](https://wingo-ui.com/de/blog/mobile-first-react-components) listet auf, was nur ein echtes Smartphone zeigt.
## Wie schneiden die Bibliotheken auf dem Smartphone ab?
Die reinen Mobile-Bibliotheken (Ionic, Framework7, antd-mobile) decken jedes Smartphone-Muster ab, die Allzweck-Bibliotheken überlassen dir das meiste, und Wingo UI liefert die Smartphone-Muster in Komponenten, die auch auf dem Desktop funktionieren. Stand der Tabelle: Oktober 2026. „Select bei 390px“ ist das, was sich beim Tippen auf ein Select geöffnet hat, oder was der Quellcode standardmäßig tut.
| Bibliothek, Version, Lizenz | Select bei 390px | Bottom Sheet |
| --- | --- | --- |
| [Wingo UI](https://wingo-ui.com/docs/installation) 1.7.0, 75 von 326 Items kostenlos | Bottom Sheet, 48px-Zeilen | Drawer: Ziehen, Snap Points, Verschachtelung |
| [Ionic React](https://ionicframework.com/docs/api/modal) 9.0.7, MIT | Standardmäßig ein Alert-Dialog; Action Sheet, Popover oder Modal auf Wunsch | Sheet Modal mit Breakpoints und Griff |
| [Framework7 React](https://github.com/framework7io/framework7/blob/master/src/react/components/sheet.jsx) 9.2.0, MIT | Smart Select öffnet eine Seite; Popup, Sheet oder Popover mit `openIn` | Sheet mit Breakpoints, Wischen zum Schließen und Wischen zur nächsten Stufe |
| [Konsta UI](https://konstaui.com/react/sheet) 5.5.0, MIT | Natives Select in einem List Input | Sheet ohne Ziehen (Prop und Tippen auf den Hintergrund) |
| [antd-mobile](https://github.com/ant-design/ant-design-mobile) 5.43.0, MIT | Picker-Räder in einem Popup unten | Popup (Wischen zum Schließen nur per Opt-in), FloatingPanel mit px-Ankern |
| [MUI](https://mui.com/material-ui/react-drawer/) 9.4.0, MIT (Core) | Schwebendes Menü, 48px-Zeilen | SwipeableDrawer, keine Snap Points |
| [shadcn/ui](https://ui.shadcn.com/docs/components/drawer) CLI, MIT | Schwebende Liste, 28px-Zeilen | Drawer mit Swipe und Snap Points |
| [HeroUI](https://www.heroui.com/docs/react/components/modal) 3.2.6, MIT | Schwebendes Popover, 36px-Zeilen | Modal sitzt unter 640px unten; Drawer lässt sich an Griff, Header oder Footer ziehen |
| [Mantine](https://mantine.dev/core/modal/) 9.7.1, MIT | Schwebendes Dropdown, 34px-Zeilen | Drawer ohne Ziehen; Vollbild-Modal über ein Media-Query-Rezept |
Die reinen Mobile-Bibliotheken verhalten sich auch auf einem breiten Screen wie eine Smartphone-App: Das Select von Ionic öffnet weiterhin einen Alert-Dialog, und sein Modal wird zu einer Karte von 600 mal 500 Pixeln, sobald das Fenster 768px breit und 600px hoch ist. Die Allzweck-Bibliotheken sehen auf dem Desktop richtig aus und überlassen dir das meiste Verhalten auf dem Smartphone. Wingo UI zielt auf die Mitte: eine Komponente, die auf dem Smartphone ein Sheet ist und auf dem Desktop ein Popover oder Dialog.
## Welche Bibliotheken öffnen Selects und Menüs als Bottom Sheets?
Unter den Allzweck-Bibliotheken öffnet nur Wingo UI ein Select standardmäßig als Bottom Sheet. Die reinen Mobile-Bibliotheken kommen per Option oder von Haus aus dorthin: Das Select von Ionic nimmt `interface="action-sheet"` oder `interface="modal"`, das Smart Select von Framework7 nimmt `openIn: "sheet"`, und der Picker von antd-mobile öffnet sich immer in einem Popup unten. shadcn/ui, Mantine und HeroUI haben eine schwebende Liste unter dem Feld geöffnet, mit Zeilen von 28, 34 und 36 Pixeln. Auch MUI hat ein schwebendes Menü geöffnet, war aber das einzige Allzweck-Paket mit fingergroßen Zeilen: Seine Menüeinträge wachsen unter dem Breakpoint `sm` von 600px auf 48px. Konsta UI nutzt ein natives `select`, das den Picker des Smartphones öffnet und für kurze Listen eine gute Lösung ist.
Eine schwebende Liste setzt kleine Zeilen direkt neben den Daumen, der sie geöffnet hat. Ein Sheet gibt dir Zeilen in voller Breite unten am Bildschirm, wo der Daumen schon ist, und lässt Platz für eine Suchzeile. In Wingo UI macht das [Select](https://wingo-ui.com/components/select) das über seine Prop `responsive`, die standardmäßig `true` ist. Am Aufrufort brauchst du also keine Media Query:
```tsx
"use client";
import { useState } from "react";
import { Select, type SelectOption } from "@/components/ui/select";
const STATES: SelectOption[] = [
{ value: "CA", label: "California", keywords: ["Los Angeles"] },
{ value: "NY", label: "New York", keywords: ["New York City"] },
{ value: "TX", label: "Texas", keywords: ["Austin"] },
];
export function ShippingState() {
const [state, setState] = useState("");
return (
);
}
```
Unter 768px öffnet das Feld ein Sheet mit seinem Label als Titel, mit 48px-Zeilen, und die gewählte Zeile wird in den sichtbaren Bereich gescrollt. Bei mehr als 8 Optionen sitzt eine Suchzeile unter dem Titel, und auf einem Touchscreen wartet sie auf einen Tap, statt sofort die Tastatur über der Liste aufzuklappen. Mit `responsive={false}` behältst du die schwebende Liste auch auf Smartphones. Popover, Dropdown Menu, Dialog und die Date Picker folgen derselben Regel, und alle außer den Date Pickern sind kostenlos.
> Live-Demo (Select): Tippe auf dem Smartphone auf das Feld „State“: Ein Sheet gleitet mit großen Zeilen und einem Suchfeld hoch; auf einem breiten Screen öffnet dasselbe Feld eine Liste darunter. Probier sie unter [Select](https://wingo-ui.com/components/select) aus und installier sie mit `npx wingo-ui@latest add select`.
## Wie groß sind die Touch-Ziele ab Werk?
Die meisten Bibliotheken liefern einen Standard-Button von 32 bis 40 Pixeln und behalten diese Größe auf jedem Gerät. WCAG 2.2 verlangt 24 mal 24 Pixel auf Stufe AA und 44 mal 44 auf Stufe AAA, Apples Richtlinien setzen 44 Punkt an. Jeder Standard-Button hier schafft AA, nur wenige erreichen ohne Hilfe 44.
| Bibliothek | Standard-Button | Ändert sich bei Touch | Woher wir es wissen |
| --- | --- | --- | --- |
| Wingo UI | 40px, 44px bei Touch | Ja, nach Zeigertyp | Gemessen |
| Ionic React | Etwa 50px (iOS-Modus), 36px (Material-Modus) | Nach Plattform-Modus | Quellcode |
| Framework7 React | 34px (iOS), 40px (Material) | Nach Plattform-Modus | Quellcode |
| Konsta UI | 34px (iOS), 40px (Material) | Nach Theme | Quellcode |
| antd-mobile | 40px | Nein | Gemessen |
| MUI | 36,5px | Nein | Gemessen |
| shadcn/ui | 32px in der Doku; 28 bis 40px über seine acht Styles | Nein | Gemessen, Quellcode |
| HeroUI | 40px, 36px ab 768px | Nach Breite | Gemessen, Quellcode |
| Mantine | 36px | Nein | Gemessen |
Wingo UI ist hier die einzige Bibliothek, deren Buttons ihre Größe nach Zeigertyp ändern statt nach Bildschirmbreite oder Plattform. Ein Touch-Laptop bekommt also 44px-Buttons, und ein schmales Desktop-Fenster behält 40px. Die Regel ist eine einzige Tailwind-Variante in der Größen-Map der Komponente [Button](https://wingo-ui.com/components/button):
```tsx
// components/ui/button.tsx (Auszug)
md: "h-10 gap-2 px-4 text-sm pointer-coarse:h-11",
```
Die kleine Größe behält ihren 32px-Look und bekommt stattdessen über ein Pseudo-Element eine 44px große Trefferfläche. Unser [Guide zur Mindestgröße von Touch-Zielen](https://wingo-ui.com/de/blog/minimum-touch-target-size-react-tailwind) erklärt, wann `pointer: coarse` besser ist als `any-pointer: coarse` und wie du es testest.
## Welche Bibliotheken kümmern sich um die Safe Areas?
Die reinen Mobile-Bibliotheken übernehmen das, die meisten Allzweck-Bibliotheken nicht. Ionic gibt Toolbars, Tab-Leiste und Modals über die Variablen `--ion-safe-area-*` den nötigen Abstand, und du kannst sie überschreiben. Framework7 macht dasselbe mit `--f7-safe-area-*`. Konsta UI liefert Utilities im Stil von `pb-safe`, die seine Toolbars nutzen. antd-mobile hat eine Komponente `SafeArea`, aber die Prop `safeArea` seiner Tab-Leiste ist standardmäßig aus. Wir haben die veröffentlichten Pakete `@mui/material` 9.4.0 und `@heroui/styles` 3.2.6 sowie die Basiskomponenten und Styles von shadcn/ui nach `safe-area-inset` durchsucht und nichts gefunden. Mantine nutzt die Insets nur in seiner AppShell, deren Footer den unteren Inset als Padding einrechnet.
Alle lesen `env(safe-area-inset-*)`, und das bleibt 0, bis die Seite es mit `viewport-fit=cover` aktiviert. Im Next.js App Router ist das ein einziger Export aus dem Root-Layout:
```tsx
import type { Viewport } from "next";
export const viewport: Viewport = { viewportFit: "cover" };
```
In Wingo UI lesen 38 Komponentendateien die Insets. Die [Bottom Tab Bar](https://wingo-ui.com/components/bottom-tab-bar) lässt Platz für den Home-Indikator, hält unter ihrer schwebenden Variante mindestens 12px Abstand und stellt ihre Höhe bereit, damit ein schwebender Button oder eine fixierte Kaufleiste darüber sitzen kann. Hier siehst du sie mit [Pull To Refresh](https://wingo-ui.com/components/pull-to-refresh) auf der Seite dahinter, als Client-Komponente, die dein Root-Layout um `children` legen kann:
```tsx
"use client";
import type { ReactNode } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { House, Inbox, Plus, UserRound, Users } from "lucide-react";
import { BottomTabBar, type BottomTabBarItem } from "@/components/ui/bottom-tab-bar";
import { PullToRefresh } from "@/components/ui/pull-to-refresh";
const tabs: BottomTabBarItem[] = [
{ label: "Start", href: "/", icon: },
{ label: "Kunden", href: "/clients", icon: },
{ label: "Posteingang", href: "/inbox", icon: , badge: 4 },
{ label: "Profil", href: "/profile", icon: },
];
export function PhoneShell({ children }: { children: ReactNode }) {
const router = useRouter();
const pathname = usePathname();
return (
<>
router.refresh()} variant="ios">
{children}
, href: "/clients/new" }}
hideOnScroll
/>
);
}
```
Die Tab-Leiste ist standardmäßig am Viewport fixiert und schreibt ihre Höhe, Safe Area inklusive, in `--bottom-bar-offset` auf dem Root-Element. Der Wrapper mit `pb-(--bottom-bar-offset)` liest diesen Wert, sodass die letzte Zeile der Seite über der Leiste bleibt. `linkComponent` und `currentPath` geben ihr den Next.js-Router, die Tabs navigieren also ohne kompletten Seiten-Reload, und die aktive Pille folgt der Route. `hideOnScroll` schiebt die Leiste beim Scrollen nach unten weg und holt sie beim Scrollen nach oben zurück, nur mit Transforms. Pull To Refresh ruft `router.refresh()` auf, um die Serverdaten der Seite neu zu laden, und der Spinner dreht sich mindestens 500ms lang (oder bis ein Promise, das du zurückgibst, erledigt ist). Auch ein Trackpad-Scroll über den oberen Rand hinaus löst das Ziehen aus, die Geste funktioniert also auch auf dem Desktop. Der [Guide zu Safe Areas](https://wingo-ui.com/de/blog/tailwind-safe-area-insets) zeigt, wie du eine Kaufleiste oder einen schwebenden Button über der Tab-Leiste stapelst.
> Live-Demo (Bottom Tab Bar): Tippe auf die Tabs: Die Pille gleitet zum aktiven Tab; scroll die Seite, und die Leiste gleitet weg und kommt zurück, wenn du nach oben scrollst. Probier sie unter [Bottom Tab Bar](https://wingo-ui.com/components/bottom-tab-bar) aus und installier sie mit `npx wingo-ui@latest add bottom-tab-bar`.
## Welche Bibliotheken bringen mobile Gesten mit?
Wingo UI, Ionic, Framework7 und antd-mobile liefern alle vier gängigen Smartphone-Gesten. Die Allzweck-Bibliotheken liefern höchstens einen wischbaren Drawer, Konsta UI gar keine.
| Bibliothek | Snap Points | Pull to Refresh | Wischbare Zeilen | Wheel Picker |
| --- | --- | --- | --- | --- |
| Wingo UI | Drawer | Pull To Refresh | List | Picker Wheel |
| Ionic React | Sheet Modal | Refresher | Item Sliding | Picker |
| Framework7 React | Sheet | Page `ptr` | Swipeout | Picker |
| antd-mobile | FloatingPanel | PullToRefresh | SwipeAction | Picker |
| shadcn/ui | Drawer | Nein | Nein | Nein |
| MUI | Nein | Nein | Nein | Nein |
| HeroUI, Mantine, Konsta UI | Nein | Nein | Nein | Nein |
In Wingo UI ist der Drawer kostenlos. Pull To Refresh, die wischbaren Zeilen der [List](https://wingo-ui.com/components/list) und das Picker Wheel gehören zu Pro.
Bei Sheets lesen sich die API von Ionic und unsere fast gleich. Ionic braucht einen Breakpoint `0`, bevor ein Wischen das Sheet schließen kann:
```tsx
// Ionic React: stoppt bei halber und voller Höhe, nach unten wischen schließt
// import { IonContent, IonModal } from "@ionic/react";
Preis, Zustand und Kategorien
// Wingo UI: dieselben Stufen; von der ersten nach unten ziehen schließt
// import { Button } from "@/components/ui/button";
// import { Drawer } from "@/components/ui/drawer";
Filter} title="Filter" snapPoints={[0.5, 1]}>
Preis, Zustand und Kategorien
```
Der Unterschied zeigt sich ab 768px: Der [Drawer](https://wingo-ui.com/components/drawer) bleibt ein Sheet mit begrenzter Breite oder wird über seine Prop `desktop` zu einem Seitenpanel oder einem zentrierten Dialog, während das Sheet Modal von Ionic ein Sheet unten am Bildschirm bleibt. Unser [Guide zum Bottom Sheet fürs Web](https://wingo-ui.com/de/blog/react-bottom-sheet-for-the-web) behandelt Snap Points, Verschachtelung und die Tastatur im Detail.
Der Wheel Picker ist die Geste, die die meisten Web-Bibliotheken auslassen. Das [Picker Wheel](https://wingo-ui.com/components/picker-wheel) dreht sich mit nativem Schwung, gibt auf Smartphones mit Vibrationsmotor ein haptisches Ticken, wenn Zeilen die Mitte passieren, und funktioniert per Tastatur mit Pfeiltasten, Bild auf, Bild ab und Springen per Texteingabe. Als Feld öffnet es die Räder auf Smartphones in einem Bottom Sheet mit Buttons zum Bestätigen und Abbrechen, auf dem Desktop in einem Popover:
```tsx
"use client";
import { PickerWheelField, pickerRange } from "@/components/ui/picker-wheel";
export function AppointmentTime() {
return (
);
}
```
> Live-Demo (Picker Wheel): Gib einer Spalte Schwung: Sie dreht sich mit Schwung und rastet auf einer Zeile ein; mit der Maus ziehst oder scrollst du sie, oder du springst mit Tab hin und nimmst die Pfeiltasten. Probier sie unter [Picker Wheel](https://wingo-ui.com/components/picker-wheel) aus und installier sie mit `npx wingo-ui@latest add picker-wheel`.
## Wann sind Ionic React oder Framework7 die bessere Wahl?
Nimm Ionic React, wenn die App vor allem fürs Smartphone gedacht ist, auf iOS und Android nativ aussehen soll und vielleicht mit Capacitor in die App Stores geht. Sheet Modal, Refresher, Sliding Items, Picker und Tab-Leiste sind ausgereift, und die Modi wechseln ohne dein Zutun je nach Plattform. Der Preis dafür ist spürbar: `core.css` ist Pflicht, der [Guide für bestehende React-Apps](https://ionicframework.com/docs/react/add-to-existing) warnt, dass der CSS-Reset von Ionic mit deinen globalen Styles kollidieren kann, das Router-Paket braucht React Router 6, und die Komponenten sehen auf dem Desktop wie eine Smartphone-App aus. Framework7 React geht einen ähnlichen Kompromiss ein, mit eigenem `App`, `View` und eigenen Routen, und hat auch Versionen für Vue und Svelte.
Wingo UI passt besser, wenn dieselben Screens als Desktop-Produkt funktionieren müssen, du mit Tailwind CSS stylst und den Quellcode in deinem Repository haben willst. Es ist jünger und hat eine viel kleinere Community, es unterstützt nur React, und es hat ein einziges Design mit iOS-artigen Optionen bei manchen Teilen statt eines Plattform-Modus.
## Wann solltest du bei MUI, shadcn/ui, HeroUI oder Mantine bleiben?
Bleib, wenn die meisten deiner Nutzer am Desktop sitzen und Smartphones zweitrangig sind. MUI ist von den vieren auf dem Smartphone am stärksten: 48px-Menüzeilen auf kleinen Screens, ein `SwipeableDrawer` und ein responsiver `DatePicker` aus MUI X, der sich auf Touch-Geräten in einem Modal öffnet. shadcn/ui hat ein großes Registry-Ökosystem und einen Drawer mit Snap Points, und das [Rezept für den responsiven Dialog](https://wingo-ui.com/de/blog/shadcn-responsive-dialog-on-mobile) schreibst du einmal pro Overlay. Wenn du diesen Weg gehst, plan drei Wrapper ein: Overlay zu Sheet, Größe der Touch-Ziele und Safe-Area-Padding für alles Fixierte. Genau diese Checkliste spart dir eine Mobile First React Component Library, egal welche du wählst.
## Womit solltest du anfangen?
Fang mit dem Overlay an, das deine Nutzer auf dem Smartphone am häufigsten öffnen, denn eine schwebende Liste unter dem Daumen ist der sichtbarste Fehler auf Mobile. Installier das kostenlose Select mit `npx wingo-ui@latest add select` (ohne Account), bau es in ein Formular ein und öffne das Formular auf deinem eigenen Smartphone. Drawer, Popover, Dialog und Dropdown Menu sind ebenfalls kostenlos. Tab-Leiste, Pull to Refresh, Picker Wheel und die übrigen React Mobile Komponenten der [Kategorie Mobile](https://wingo-ui.com/components/category/mobile) gehören zu [Wingo UI Pro](https://wingo-ui.com/de/pricing), für 8 $ im Monat, 80 $ im Jahr oder einmalig 150 $. Wenn du noch zwischen Web-App und nativer App schwankst, erklärt [React Native vs PWA](https://wingo-ui.com/de/blog/react-native-vs-pwa), wann eine Web-App reicht. Welche React UI Bibliothek für Mobile du auch wählst: Teste sie bei 390px mit Touch, bevor du dich festlegst.
## Komponenten in diesem Artikel
- [Select](https://wingo-ui.com/components/select) (Free): A React select with search, groups, icons, virtualized rows and a hidden native select for forms. Installation: `npx wingo-ui@latest add select`
- [Drawer](https://wingo-ui.com/components/drawer) (Free): A React drawer and bottom sheet built on vaul: drag to dismiss, snap points, nesting, and a side panel or dialog on desktop. Installation: `npx wingo-ui@latest add drawer`
- [Bottom Tab Bar](https://wingo-ui.com/components/bottom-tab-bar) (Pro): A React bottom tab bar for phones: 3 to 5 tabs at the thumb with an animated pill, badges, a raised center action and hide on scroll. Installation: `npx wingo-ui@latest add bottom-tab-bar`
- [Picker Wheel](https://wingo-ui.com/components/picker-wheel) (Pro): A React iOS-style picker wheel whose columns spin with momentum and snap on a 3D cylinder. Installation: `npx wingo-ui@latest add picker-wheel`
- [Pull To Refresh](https://wingo-ui.com/components/pull-to-refresh) (Pro): A React pull to refresh wrapper: pull a list past its top to reload it, with rubberband resistance, iOS spokes or a Material ring, haptics. Installation: `npx wingo-ui@latest add pull-to-refresh`
## Häufige Fragen
### Welche React UI Library ist die beste für mobile Web-Apps?
Für eine App, die auf Smartphones und Desktops läuft, nimm eine Bibliothek, deren Komponenten auf dem Smartphone ihr Verhalten ändern, etwa Wingo UI, wo Overlays unter 768px zu Bottom Sheets werden. Für eine reine Mobile-App mit nativem Look nimm Ionic React: Es bringt Sheet Modals, Pull to Refresh, wischbare Listeneinträge, Picker und eine Tab-Leiste mit, die die Safe Area berücksichtigt.
### Funktioniert shadcn/ui auf dem Smartphone?
Es sieht auf Smartphones gut aus, und sein Drawer ist ein echtes Bottom Sheet mit Swipe und Snap Points. Stand Oktober 2026 bleiben Select, Popover und Dropdown Menu bei jeder Breite schwebende Panels, der Standard-Button bleibt auf Touchscreens 32px groß, und keine Komponente berücksichtigt die Safe Area. Das ergänzt du selbst.
### Ist MUI gut für Mobile?
Besser als die meisten Allzweck-Bibliotheken: Die Menüzeilen wachsen unter 600px auf 48px, SwipeableDrawer bringt Swipe-Gesten mit, und die Date Picker von MUI X öffnen sich auf Touch-Geräten in einem Modal. Für Vollbild-Dialoge brauchst du ein useMediaQuery-Rezept, der Drawer hat keine Snap Points, und Safe Areas sind deine Sache.
### Ist Ionic React 2026 noch eine gute Wahl?
Ja, für reine Mobile-Apps und Capacitor-Builds. Version 9.0.7 erschien am 7. Oktober 2026 unter MIT-Lizenz, mit iOS- und Material-Modus je nach Plattform. Es bringt eigenes CSS und eine eigene Router-Integration mit und passt deshalb weniger natürlich in eine Tailwind-CSS-App, die auch wie ein Desktop-Produkt aussehen soll.
### Sind diese Bibliotheken für React Native?
Nein. Alles hier ist für React DOM: Web-Apps, PWAs und Web Views wie Capacitor. Eine React-Native-App braucht eine Komponentenbibliothek für React Native, denn diese hier rendern HTML-Elemente.
### Kann ich Wingo UI kostenlos auf dem Smartphone testen?
Ja. Drawer, Select, Popover, Dialog, Dropdown Menu und Button sind kostenlos und wechseln auf Smartphones schon zu Bottom Sheets und 44px-Zielen. Bottom Tab Bar, Pull To Refresh, Picker Wheel und die übrigen Komponenten der Kategorie Mobile gehören zu Wingo UI Pro.
---
Quelle: https://wingo-ui.com/de/blog/best-react-component-library-for-mobile