UI Stack Advisor
Die Wahl des Stacks ist die UI-Entscheidung mit der größten Hebelwirkung in einem Projekt: Sie bestimmt die Barrierefreiheitsqualität, die Flexibilität des Theming, die Bundle-Größe und wie „schablonenhaft“ das Ergebnis aussieht. Triff die Entscheidung bewusst, einmalig und halte sie schriftlich fest.
Wissensstand: November 2026. Bibliotheken entwickeln sich schnell – überprüfe vor der Installation die aktuelle Hauptversion und API (siehe Aktualitätsprüfung). Bevorzuge, was bereits im Projekt vorhanden ist, gegenüber allem, was hier aufgeführt ist.
Schritt 1 – Lies das Projekt zuerst
Prüfe package.json / pubspec.yaml / Package.swift / build.gradle auf vorhandene UI-Bibliotheken, Styling (Tailwind-Version, CSS-in-JS), Framework-Version und etwaige components.json (shadcn), DESIGN.md oder Token-Dateien. Führe keine zweite Komponentenbibliothek neben einer bestehenden ein – erweitere die bestehende oder kapsele sie ein. Wenn das Projekt bereits einen Konkurrenten zu einer hier gemachten Empfehlung verwendet, erwähne es, aber wechsle nicht ungefragt Abhängigkeiten aus.
Schritt 2 – Beantworte fünf Fragen
- Plattform(en): nur Web, nur Mobil oder beides aus einer Codebasis?
- Eigentumsmodell: Kopiere-Quelle, die dir gehört und die du frei umgestalten kannst (shadcn-Modell) vs. eine versionierte Abhängigkeit mit einer Theme-API (MUI/Mantine-Modell)? Kopieren = maximale Gestaltungsfreiheit + du pflegst es. Abhängigkeit = schneller, konsistent, kostenlose Upgrades, schwieriger, unverwechselbar zu machen.
- Produkttyp: Marketing/Landing (ausdrucksstark, bewegungsreich), Produkt-UI/Dashboard (dicht, konsistent, tastaturfreundlich), Inhalt (typografielastig), mobile Consumer-App (natives Gefühl, Gesten).
- Barrierefreiheitsanforderung: Öffentlicher Sektor/Unternehmen/EU (European Accessibility Act) → wähle Primitive mit nachgewiesener Barrierefreiheit (React Aria, Base UI, Radix) und stricke interaktive Widgets nicht selbst.
- Styling-System: Tailwind v4 (Standard für neue Web-Projekte), CSS-Module/vanilla-extract oder CSS-in-JS; bei RN: NativeWind vs Unistyles vs Tamagui.
Schritt 3 – Standardauswahl (wenn nichts anderes einschränkt)
| Situation | Standard | Grund |
|---|---|---|
| React/Next.js Produkt-UI | shadcn/ui (Base UI-Primitive – der Standard seit Juli 2026; Radix und React Aria werden ebenfalls unterstützt) + Tailwind v4 | Du besitzt den Code, gute Barrierefreiheit, riesiges Ökosystem an Registries, KI-Tools kennen es gut |
| React, barrierefreiheitskritisch / komplexe Widgets (Datumsbereiche, Komboboxen, Drag & Drop, i18n) | React Aria Components (oder shadcn's React Aria-Variante / HeroUI v3, die darauf aufbaut) | Strengste Barrierefreiheit + i18n-Verhalten |
| React, rundum-sorglos, kein Tailwind | Mantine | 100+ Komponenten + Hooks + Formulare + Datumsauswahl, starke Dokumentation |
| React, Enterprise/Material-Look oder schwere Datentabellen | MUI v9 (+ MUI X Data Grid/Date Pickers/Charts) | Ausgereift, vollständig; schwieriger, unverwechselbar zu machen |
| Enterprise-Admin (besonders CN/APAC-Teams) | Ant Design | Riesiger Komponentensatz, datendichte Muster |
| Vue / Nuxt | Nuxt UI v4 (kostenlos, basiert auf Reka UI + Tailwind v4) oder shadcn-vue | |
| Svelte / SvelteKit | shadcn-svelte (auf Bits UI) | |
| Solid | Kobalte / solid-ui (shadcn-Port) / Ark UI | |
| Angular | Spartan UI (shadcn-ähnlich) oder Angular Material / PrimeNG | |
| Framework-agnostische Primitive | Ark UI (Zag.js-Zustandsmaschinen; React/Vue/Solid/Svelte) | |
| Marketing / Landing-Page-Flair | shadcn + Motion + ausgewählte Stücke von Magic UI / Aceternity / Animate UI / React Bits | Verwende 1–3 Signature-Effekte, kein Sammelsurium |
| React Native / Expo (neue App) | Expo + Expo Router + NativeWind v5 + React Native Reusables (shadcn für RN) oder HeroUI Native; @expo/ui für wirklich native SwiftUI/Compose-Steuerelemente; Reanimated 4 + Gesture Handler für Bewegung | |
| React Native, StyleSheet-artige Performance-Fokussierung | Unistyles 3 + eigene Komponenten | |
| React Native + Web aus einer Codebasis | Tamagui (Compiler, universell) oder Expo + NativeWind mit react-native-web | |
| Flutter | Material 3 (integriert) / Cupertino; forui oder shadcn_ui für einen Nicht-Material-Look | |
| iOS nativ | SwiftUI Systemkomponenten (Liquid Glass ab iOS 26 kommt kostenlos mit Standardsteuerelementen) | Kämpfe so wenig wie möglich gegen die Plattform |
| Android nativ | Jetpack Compose Material 3 (Expressive APIs in der material3 1.5-Linie) |
Details, Alternativen und Kompromisse pro Plattform findest du in den Referenzen – lies die passende:
references/web-react.md– React-Primitive, gestaltete Kits, shadcn-Ökosystem & Registries, Tailwind-Toolingreferences/web-other.md– Vue, Svelte, Solid, Angular, Astro, einfaches HTML/Webkomponentenreferences/mobile.md– React Native/Expo, Flutter, SwiftUI, Compose, Kotlin Multiplatformreferences/motion.md– Animationsbibliotheken pro Plattform und wann CSS/nativ ausreichtreferences/building-blocks.md– Icons, Schriften, Diagramme, Tabellen, Formulare, Toasts, Datumsauswahl, Drag & Drop, Virtualisierung, Editoren, Befehlsmenüs, Karussells, Karten, 3Dreferences/inspiration.md– Wo man nach Referenzen sucht (Mobbin, Refero usw.) und KI-Design-Tooling
Schritt 4 – Dokumentiere die Entscheidung
Schreibe die Wahl ins Projekt (DESIGN.md oder README-Abschnitt „UI-Stack“): Bibliothek + Version, Styling-Ansatz, Icon-Set, Bewegungsbibliothek, Schriftart und Begründung. Zukünftige Sitzungen (und andere Agenten) lesen dies, anstatt erneut zu entscheiden.
Aktualitätsprüfung (vor der Installation durchführen)
npm view <pkg> version time.modified repository.url # aktuelle Version + letzte Veröffentlichung
npm view <pkg> deprecated # Deprecation-Hinweis, falls vorhanden
# Flutter: https://pub.dev/packages/<pkg> (Likes, Pub Points, letzte Veröffentlichung)
# Swift: Überprüfe das neueste Release-Tag des Repos
Signale, eine Bibliothek zu meiden: keine Veröffentlichung in 12+ Monaten mit offenen kritischen Issues, README sagt „unmaintained/archived“, Peer-Abhängigkeiten auf alte React/RN-Versionen fixiert, keine TypeScript-Typen, Barrierefreiheitsprobleme ignoriert. Bekannte zurückgezogene/gefährdete Beispiele: react-beautiful-dnd (deprecated → verwende @atlaskit/pragmatic-drag-and-drop oder dnd kit), @base-ui-components/react (umbenannt → @base-ui/react), Chakra-v2-APIs (v3 ist eine Neufassung auf Ark UI/Panda), Reanimated 2/3-Gesten-APIs (useAnimatedGestureHandler in v4 entfernt).
Wenn Docs-MCPs verfügbar sind (z. B. Context7, shadcn MCP, das Figma MCP für Design-System-Suchen), verwende sie, um aktuelle Dokumentation zu lesen, anstatt dich auf das Gedächtnis zu verlassen.
Anti-Patterns
- Zwei Komponentenbibliotheken in einer App (MUI + shadcn) → inkonsistenter Fokus, Abstände, Theming.
- Eigenbau von Dialogen, Menüs, Komboboxen, Datumsauswahlen, Toasts, Tooltips → Barrierefreiheitsfehler (Fokus-Falle, Escape-Taste, aria, Scroll-Sperre, Kollision). Verwende Primitive.
- Eine Bibliothek für „animierte Komponenten“ pauschal installieren → kopiere nur die 1–3 Stücke, die du brauchst.
- Verwendung eines Web-UI-Kits in React Native über Webviews oder Erzwingen von Material-Komponenten für iOS-Benutzer.
- Das Standard-Theme der Bibliothek unverändert lassen → das „Jede shadcn-App sieht gleich aus“-Problem. Ändere mindestens: Schriftart, Radius, Akzentfarbe, neutrale Temperatur und Dichte (siehe design-system-builder und color-theory Skills).