Die beste React Mobile UI Library 2026: 9 im Vergleich

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, und unser Guide zu shadcn-Alternativen 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 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.

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 das über seine Prop responsive, die standardmäßig true ist. Am Aufrufort brauchst du also keine Media Query:

"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 (
    <Select
      label="Bundesstaat"
      placeholder="Bundesstaat wählen"
      options={STATES}
      value={state}
      onValueChange={setState}
      name="state"
      autoComplete="address-level1"
    />
  );
}

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.

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.

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:

// 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 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:

import type { Viewport } from "next";

export const viewport: Viewport = { viewportFit: "cover" };

In Wingo UI lesen 38 Komponentendateien die Insets. Die 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 auf der Seite dahinter, als Client-Komponente, die dein Root-Layout um children legen kann:

"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: <House /> },
  { label: "Kunden", href: "/clients", icon: <Users /> },
  { label: "Posteingang", href: "/inbox", icon: <Inbox />, badge: 4 },
  { label: "Profil", href: "/profile", icon: <UserRound /> },
];

export function PhoneShell({ children }: { children: ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  return (
    <>
      <PullToRefresh onRefresh={() => router.refresh()} variant="ios">
        <div className="pb-(--bottom-bar-offset)">{children}</div>
      </PullToRefresh>
      <BottomTabBar
        className="md:hidden"
        items={tabs}
        currentPath={pathname}
        linkComponent={Link}
        action={{ label: "Neuer Kunde", icon: <Plus />, 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 zeigt, wie du eine Kaufleiste oder einen schwebenden Button über der Tab-Leiste stapelst.

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.

In Wingo UI ist der Drawer kostenlos. Pull To Refresh, die wischbaren Zeilen der 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:

// Ionic React: stoppt bei halber und voller Höhe, nach unten wischen schließt
// import { IonContent, IonModal } from "@ionic/react";
<IonModal trigger="open-filters" initialBreakpoint={0.5} breakpoints={[0, 0.5, 1]}>
  <IonContent className="ion-padding">Preis, Zustand und Kategorien</IonContent>
</IonModal>

// Wingo UI: dieselben Stufen; von der ersten nach unten ziehen schließt
// import { Button } from "@/components/ui/button";
// import { Drawer } from "@/components/ui/drawer";
<Drawer trigger={<Button>Filter</Button>} title="Filter" snapPoints={[0.5, 1]}>
  <p className="text-sm text-muted-foreground">Preis, Zustand und Kategorien</p>
</Drawer>

Der Unterschied zeigt sich ab 768px: Der 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 behandelt Snap Points, Verschachtelung und die Tastatur im Detail.

Der Wheel Picker ist die Geste, die die meisten Web-Bibliotheken auslassen. Das 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:

"use client";

import { PickerWheelField, pickerRange } from "@/components/ui/picker-wheel";

export function AppointmentTime() {
  return (
    <PickerWheelField
      label="Uhrzeit des Termins"
      name="time"
      defaultValue={["10", "30"]}
      columns={[
        { id: "hour", label: "h", options: pickerRange(8, 19, { pad: 2 }) },
        { id: "minute", label: "min", options: pickerRange(0, 55, { step: 5, pad: 2 }) },
      ]}
    />
  );
}

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 (opens in a new tab) 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 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 gehören zu Wingo UI Pro, 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, 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.

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.