Konsta UI Alternative für React: Ionic vs. Wingo UI

Du hast Konsta UI gewählt, weil es dir iOS- und Material-Komponenten als Tailwind-Klassen liefert, und jetzt passt etwas nicht mehr: Du brauchst einen Wheel Picker, den es nicht gibt, ein Sheet, das sich wegwischen lässt, Tastaturbedienung oder ein Layout, das auch am Desktop funktioniert. Dieser Guide vergleicht die drei realistischen Optionen, wenn du eine Konsta UI Alternative für eine React Web App suchst: Konsta UI selbst, Ionic React und Mobile-Komponenten, deren Quellcode du in dein Projekt kopierst. Alle Fakten unten haben wir am 6. November 2026 geprüft und mit ihrer Quelle verlinkt.

Wir bauen Wingo UI, die Option mit dem Quellcode im eigenen Projekt, also behalte das bei diesem Teil im Hinterkopf. Wir sagen aber auch klar, wo Konsta und Ionic die bessere Wahl sind. Einen größeren Überblick geben unser Vergleich von neun React-Bibliotheken für Mobile und die Kategorie Vergleiche.

Was ist Konsta UI, und warum eine Alternative suchen?

Konsta UI (opens in a new tab) ist eine kostenlose, MIT-lizenzierte Bibliothek mit pixelgenauen Mobile-Komponenten auf Basis von Tailwind CSS, für React, Vue und Svelte. Version 5.5.0, am 28. September 2026 auf npm veröffentlicht, bringt laut der Website den Look von iOS 26 und Material Design 2025. Sie stammt vom Autor von Framework7, und ihre Startseite beschreibt sie als vor allem für den Einsatz in „Eltern“-Frameworks wie Ionic oder Framework7 gedacht: Das Eltern-Framework kümmert sich um Routing, Navigation und native APIs, Konsta zeichnet die UI der Seite.

Die Seitenleiste der React-Doku listet etwa 40 Komponenten: Action Sheet, Navbar, Tab Bar, Toolbar, List, List Input, Segmented Control, Sheet Modal, Popup, Dialog, Toast, Stepper, Range, Messages und ein paar mehr. Für eine kostenlose Bibliothek ist das viel Feinschliff. Trotzdem suchen Leute aus ein paar wiederkehrenden Gründen nach einer Alternative:

• Fehlende Teile. In der Komponentenliste gibt es keinen Wheel Picker, keine wischbaren Tabs, kein Pull to Refresh und keine Swipe Actions.
• Keine Wischgesten. Overlays öffnen und schließen über einen Prop opened und ein Tippen auf den Hintergrund. Ein Sheet nach unten ziehen, um es zu schließen, oder zwischen Seiten wischen geht nicht.
• Nur Smartphone. Die Komponenten sehen bei jeder Breite wie eine Smartphone-App aus. Auf einem 1440px breiten Bildschirm fährt ein Action Sheet trotzdem von unten herein.
• Keine App-Shell. Ohne Ionic oder Framework7 bringst du Routing und Seitenübergänge selbst mit.

Wie schneiden Konsta UI, Ionic und Wingo UI im Vergleich ab?

Kurz gesagt: Konsta ist am leichtesten und günstigsten, Ionic deckt das meiste Smartphone-Verhalten ab, und Wingo UI ist für responsive Web Apps gebaut. Geprüft am 6. November 2026 auf den npm-Seiten, in den GitHub-Repositories und in der Doku der Projekte.

Konsta und Ionic liegen beide in node_modules, und du aktualisierst sie mit npm update. Wingo UI kopiert den Quellcode der Komponenten nach components/ui/, der Code gehört also dir und du kannst ihn ändern. npx wingo-ui@latest update führt unsere Änderungen mit deinen Anpassungen zusammen.

Konsta UI vs. Ionic: Welcher Look und welches Theming passen?

Beide liefern einen überzeugenden iOS- und Material-Look. Der Unterschied liegt darin, wie du ihn änderst.

Konsta UI ist reines Tailwind. Du umschließt die App einmal und wählst ein Theme:

// app/konsta-shell.tsx
"use client";

import { App } from "konsta/react";

export function KonstaShell({ children }: { children: React.ReactNode }) {
  return (
    <App theme="ios" safeAreas>
      {children}
    </App>
  );
}

Seine theme.css legt die Palette als Theme-Variablen von Tailwind an (--color-primary zeigt auf --k-color-primary, dazu kommen die Material-Tokens). Du kannst sie also in deinem eigenen CSS umfärben und auf jeder Komponente weiter Utility-Klassen nutzen. Der Prop dark auf App (standardmäßig an) behält die dark:-Klassen der Komponenten, also folgt der Dark Mode der dark-Variante von Tailwind. Die meisten Komponenten nehmen außerdem ein colors-Objekt und Props pro Theme wie bgIos und bgMaterial für feinere Kontrolle.

Ionic stylst du mit CSS-Variablen (--ion-color-primary und Co.) und bei Komponenten, die in einem Shadow Root rendern, mit CSS Shadow Parts (opens in a new tab). Das funktioniert gut, heißt aber, dass Tailwind-Klassen an der Shadow-Grenze enden: Du kannst rounded-2xl nicht innen auf eine Spalte von ion-picker setzen. Ionic wählt den Modus ios oder md automatisch nach Plattform. In einem Capacitor-Build ist das genau richtig, in einem Desktop-Browser etwas seltsam.

Wingo UI liest semantische Tokens aus deiner globals.css (bg-surface, text-muted-foreground, border-border) und macht jede visuelle Entscheidung zu einem Prop: size, tone, radius, color, variant und classNames für die inneren Teile. Einen Schalter zwischen iOS und Material für die ganze Bibliothek gibt es nicht. Ein paar Mobile-Teile haben beide Formen, etwa das Action Sheet mit variant="ios" oder variant="material".

Welche Option passt am besten zu Tailwind v4?

Alle drei funktionieren heute mit Tailwind CSS v4, jede auf ihre Weise. Konstas Installationsseite richtet es mit der Syntax von v4 ein:

@import "tailwindcss";
@import "konsta/react/theme.css";

Wenn du in Utility-Klassen denkst und Tailwind Mobile UI Components ohne Umwege haben willst, ist das der kürzeste Weg. Ionic hängt gar nicht von Tailwind ab. Du kannst Tailwind für dein eigenes Layout neben dem CSS von Ionic nutzen, aber die beiden Styling-Systeme bleiben getrennt. Wingo UI ist von Anfang an für Tailwind v4 geschrieben: Die Komponenten nutzen dieselben Tokens wie deine App, also erreicht eine Farbänderung in globals.css jede Komponente und jede Seite.

Welche Option beherrscht Gesten?

Hier unterscheiden sich die drei am stärksten, und hier ist Konsta am schwächsten. Eine Textsuche im React-Quellcode von Konsta UI 5.5.0 hat keinen Wisch- oder Drag-Code gefunden; das einzige Pointer-Tracking ist die Hervorhebung in der iOS Tab Bar, die deinem Finger über die Tabs folgt. Die Komponenten Sheet und Actions nehmen opened und onBackdropClick, und so schließen sie auch. Der einzige Effekt, der am Scrollen hängt, ist die Navbar: Mit large klappt der große Titel beim Scrollen in die Leiste, recht nah an iOS.

Ionic hat die Gesten. Sein Sheet-Modal (opens in a new tab) rastet zwischen Breakpoints ein und lässt sich wegwischen, mit ion-segment-view kann man zwischen den Inhalten eines Segments wischen (opens in a new tab), der Refresher übernimmt Pull to Refresh, ion-item-sliding zeigt Swipe Actions, und ion-picker ist ein echtes Rad mit ArrowUp, ArrowDown, PageUp, PageDown, Home und End auf der Tastatur. Der zusammenklappende Large Title (opens in a new tab) (collapse="condense") gilt nur im iOS-Modus.

Wingo UI liefert dieselben Smartphone-Muster als einzelne Komponenten. Das Picker Wheel dreht sich mit dem Schwung des Smartphones selbst und rastet auf einem 3D-Zylinder ein; der Wert ändert sich erst, wenn das Rad stehen bleibt.

"use client";

import { useState } from "react";
import { PickerWheel, pickerRange } from "@/components/ui/picker-wheel";

const hours = pickerRange(8, 19, { pad: 2 });
const minutes = pickerRange(0, 55, { step: 5, pad: 2 });

export function AppointmentTime() {
  const [time, setTime] = useState(["10", "30"]);

  return (
    <PickerWheel
      aria-label="Uhrzeit des Termins"
      loop
      value={time}
      onValueChange={setTime}
      columns={[
        { id: "hour", label: "h", options: hours },
        { id: "minute", label: "min", options: minutes },
      ]}
    />
  );
}

Die Swipeable Tabs legen die Seiten nebeneinander und bewegen den Indikator mit deinem Daumen. Vertikales Scrollen innerhalb einer Seite wechselt nie den Tab. Genau daran scheitern die meisten selbst gebauten Versionen.

Der Large Title Header bildet den Übergang vom großen Titel in die Leiste wie unter iOS in jedem Browser nach, und die Bottom Tab Bar bringt Badges, eine erhöhte Aktion in der Mitte und Ausblenden beim Scrollen mit. Unser Guide zum Wheel Picker und der Guide zum Native App Feeling zeigen genauer, wie sich diese Komponenten auf echten Smartphones verhalten.

Wie sehen die Action Sheets im Code aus?

Ein Action Sheet ist ein guter Test, weil alle drei eins haben. In Konsta UI verwaltest du den Open-State selbst und schließt das Sheet aus jedem Button heraus:

"use client";

import { useState } from "react";
import { Actions, ActionsButton, ActionsGroup, ActionsLabel, Button } from "konsta/react";

export function ListingActions() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Aktionen zum Inserat</Button>
      <Actions opened={open} onBackdropClick={close}>
        <ActionsGroup>
          <ActionsLabel>Wohnung mit 2 Schlafzimmern, Brooklyn</ActionsLabel>
          <ActionsButton onClick={close}>Teilen</ActionsButton>
          <ActionsButton onClick={close}>Inserat löschen</ActionsButton>
        </ActionsGroup>
        <ActionsGroup>
          <ActionsButton onClick={close} bold>
            Abbrechen
          </ActionsButton>
        </ActionsGroup>
      </Actions>
    </>
  );
}

Im Quellcode von Actions, Sheet, Dialog und Popup in Konsta haben wir weder eine Behandlung der Escape-Taste noch ein Fokus-Management gefunden. Wer mit der Tastatur arbeitet, kann das Sheet also nicht schließen, und der Fokus bleibt dahinter. Wenn dir Desktop-Nutzer wichtig sind, ergänzt du das selbst.

Ionic beschreibt das Sheet über Button-Rollen und kümmert sich selbst um Fokus und Escape:

import { IonActionSheet, IonButton } from "@ionic/react";

export function ListingActions() {
  return (
    <>
      <IonButton id="listing-actions">Aktionen zum Inserat</IonButton>
      <IonActionSheet
        trigger="listing-actions"
        header="Wohnung mit 2 Schlafzimmern, Brooklyn"
        buttons={[
          { text: "Inserat löschen", role: "destructive" },
          { text: "Teilen" },
          { text: "Abbrechen", role: "cancel" },
        ]}
        onDidDismiss={({ detail }) => console.log(detail.role)}
      />
    </>
  );
}

Das Action Sheet von Wingo UI bekommt die Aktionen als Daten, zeigt einen Spinner in einer Zeile, deren onSelect ein Promise zurückgibt, und wird ab 768px zu einem kompakten Dialog (oder mit desktop="popover" zu einem Menü am Auslöser):

"use client";

import { MoreHorizontal, Share, Trash2 } from "lucide-react";
import { ActionSheet } from "@/components/ui/action-sheet";
import { Button } from "@/components/ui/button";

export function ListingActions({ onDelete }: { onDelete: () => Promise<void> }) {
  return (
    <ActionSheet
      title="Wohnung mit 2 Schlafzimmern, Brooklyn"
      trigger={
        <Button variant="ghost" size="icon" radius="full" aria-label="Aktionen zum Inserat">
          <MoreHorizontal />
        </Button>
      }
      actions={[
        { id: "share", label: "Teilen", icon: <Share /> },
        { id: "delete", label: "Inserat löschen", icon: <Trash2 />, tone: "danger", onSelect: onDelete },
      ]}
    />
  );
}

Installier es mit npx wingo-ui@latest add action-sheet.

Was kosten sie an Bundle-Größe?

Das haben wir am 6. November 2026 selbst gemessen, denn die „unpacked size“ auf npm sagt wenig darüber, was tatsächlich ausgeliefert wird. Methode: pro Bibliothek eine kleine React-19-Seite, gebündelt mit esbuild 0.25 (minifiziert, Production), nur JavaScript, abzüglich der 69 KB gzipped, die React und React DOM allein belegen.

Lies die Zahlen mit Vorsicht. Konstas package.json hat kein sideEffects-Flag, also hat der Bundler das ganze konsta/react behalten, obwohl die Seite zehn Komponenten importiert hat; diese 45 KB sind fast die gesamte Bibliothek. Bei Ionic kommt noch das CSS dazu (allein core.css hat etwa 2,6 KB gzipped, und die Doku empfiehlt mehrere weitere Dateien). Unsere fünf Komponenten sind am schwersten: Etwa 137 KB des minifizierten Gesamtwerts sind ihr eigener Quellcode. Der ist groß, weil jede Komponente ihre Gesten, die Tastaturbedienung, die Pfade für reduzierte Bewegung und die Desktop-Variante mitbringt. Etwa 135 KB sind die Bibliothek motion. Nutzt deine App schon motion, Radix und tailwind-merge, steckt der größte Teil davon bereits in deinem Bundle, und Next.js lädt jede Komponente nur auf den Routen, die sie verwenden. Wenn du auf rohe Bytes auf einer Smartphone-Seite optimierst, gewinnt Konsta diese Runde klar.

Welche Option passt am besten zum Next.js App Router?

Konstas Next.js-Seite (opens in a new tab) zeigt noch den Pages Router (pages/_app.js). Die Dateien haben keine "use client"-Direktive und nutzen Hooks, also importierst du sie im App Router aus deiner eigenen Client-Komponente, wie im KonstaShell oben. Die React-Übersicht von Ionic nennt Next.js neben Vite als mögliches Tooling, aber die Doku zu v9, die wir gelesen haben, hat keinen Guide für den App Router oder Server Rendering, und die Komponenten von Ionic sind Stencil Web Components, die auf dem Client hydrieren. In der Praxis sind die meisten Ionic-React-Apps clientseitig gerenderte Single Page Apps, oft in Capacitor verpackt. Jede der fünf Wingo-UI-Komponenten aus diesem Artikel beginnt mit "use client" und greift beim Rendern nicht auf window zu, du setzt sie also direkt in eine serverseitig gerenderte Seite.

Wann sind Konsta UI oder Ionic die bessere Wahl?

Bleib bei Konsta UI, wenn die App in Ionic, Framework7 oder Capacitor lebt, du das neueste iOS- und Material-Styling kostenlos willst und weder Picker noch wischbare Seiten oder Tastaturbedienung brauchst. Es ist hier die kleinste Option, und die MIT-Lizenz hat keine Haken.

Nimm Ionic React, wenn das Produkt nur fürs Smartphone gedacht ist, du in die App Stores willst und Routing, Seitenübergänge, Plattform-Modi und alle gängigen Gesten aus einem gepflegten Framework willst. Es ist die vollständigste kostenlose Mobile UI Library für das Web in diesem Vergleich. Falls du eigentlich eine Ionic React Alternative gesucht hast: Für ein reines Smartphone-Produkt ist die bessere Antwort oft Ionic selbst plus ein paar eigene Teile.

Nimm Komponenten mit eigenem Quellcode wie Wingo UI, wenn dieselbe Next.js App auf Smartphone und Desktop genutzt wird, wenn das Action Sheet am Laptop zu einem Dialog werden soll und wenn du oder dein Coding-Agent die Komponenten selbst bearbeiten wollen. Die fünf Mobile-Teile aus diesem Artikel gehören zu Pro. Der Drawer, in dem sich Picker und Action Sheet öffnen, ist kostenlos, genau wie das Segmented Control.

Wie probierst du die Option mit eigenem Quellcode aus?

Leg einen kostenlosen Account an, kopier die kostenlosen Teile und öffne den Block Mobile App Home. Dort siehst du Large Title, Tabs und Tab Bar zusammen auf einem Screen. Wenn diese Muster zu deiner App passen, installierst du die Pro-Komponenten mit demselben Befehl. Der Guide zu shadcn Alternativen stellt die übrigen Bibliotheken vor, bei denen du den Quellcode kopierst.

npx wingo-ui@latest add picker-wheel swipeable-tabs bottom-tab-bar

Häufige Fragen

Was ist die beste Konsta UI Alternative für React?

Ionic React, wenn deine App nur fürs Smartphone gedacht ist und du ein komplettes Framework mit Routing, Übergängen und Gesten willst. Wingo UI, wenn deine App auf Smartphone und Desktop läuft und du den Quellcode in deinem Repository haben willst. Am nächsten dran ist Framework7 React, denn es ist das Eltern-Framework von Konsta und stammt vom selben Autor.

Konsta UI vs. Ionic: Was soll ich nehmen?

Konsta UI ist eine Komponentenschicht: gestylte Tailwind-Komponenten ohne Routing und Gesten, MIT-lizenziert, in unserem Test etwa 45 KB gzipped. Ionic ist ein komplettes App-Framework mit eigener Routing-Anbindung, Sheet-Modals, einem Picker und Wischgesten, ebenfalls MIT, im selben Test etwa 91 KB gzipped. Laut Konstas eigener Website ist es vor allem für den Einsatz in Ionic oder Framework7 gedacht.

Funktioniert Konsta UI mit Tailwind CSS v4?

Ja. Stand November 2026 installierst du Konsta UI 5.5.0 mit @import 'tailwindcss' und danach @import 'konsta/react/theme.css' in deiner Haupt-CSS-Datei, also im Setup von Tailwind v4. Die Farben sind Theme-Variablen von Tailwind, die du überschreiben kannst.

Unterstützt Konsta UI Wischgesten?

Nicht für Sheets oder Seiten. Eine Textsuche im React-Quellcode von Konsta UI 5.5.0 hat keine Wisch- oder Drag-Logik gefunden: Sheets und Action Sheets öffnen und schließen über den Prop opened und ein Tippen auf den Hintergrund. Das einzige Touch-Tracking ist die Hervorhebung in der iOS Tab Bar, und die Navbar mit Large Title klappt beim Scrollen zusammen.

Darf ich Konsta UI kommerziell kostenlos nutzen?

Ja. Konsta UI steht unter MIT-Lizenz und hat keine kostenpflichtige Stufe; die Website bittet stattdessen um Sponsoring. Ionic Framework ist ebenfalls MIT. Wingo UI hat 75 kostenlose Items, und seine Mobile-Teile wie Picker Wheel und Action Sheet gehören zu Pro.