---
title: "shadcn/ui vs. MUI vs. Mantine: Derselbe Screen fünfmal gebaut und gemessen"
description: "shadcn/ui vs. MUI vs. Mantine in einem echten Benchmark: derselbe React-Screen fünfmal gebaut, gzip-Bundle-Größen, ausgelieferte npm-Pakete, der Code, der Ihnen am Ende gehört, was sich änderte, als shadcn Base UI statt Radix zum Standard machte, was MUI 9 und Mantine 9 bringen, auf welche Fallstricke ich gestoßen bin und welche Bibliothek Sie wählen sollten."
author: Aleksei Aleinikov
date: 2026-10-07
lang: de
tags: [shadcn-ui, mui, mantine, base-ui, radix-ui, react-aria, react-ui-library]
canonical: https://www.alekseialeinikov.com/de/blog/topics/programming/shadcn-ui-vs-mui-vs-mantine-vergleich
source: alekseialeinikov.com
---
# shadcn/ui vs. MUI vs. Mantine: Derselbe Screen fünfmal gebaut und gemessen
Im Juli hat shadcn/ui seinen Standard geändert. Neue Projekte starten nicht mehr auf Radix, sondern auf [Base UI](https://base-ui.com/react/overview/about) – einer Bibliothek „from the creators of Radix, Material UI, and Floating UI", deren Repository in der GitHub-Organisation von MUI liegt. Das meistgesuchte React-UI-Kit läuft damit standardmäßig auf einer Engine, die die Leute hinter Material UI gebaut haben.
Das macht die übliche Frage „shadcn vs. MUI vs. Mantine" spannender – und die meisten Vergleiche, die ich gefunden habe, beschreiben noch den alten Stand. Also habe ich **denselben Screen fünfmal gebaut** – shadcn auf Base UI, Radix und React Aria, dazu MUI 9 und Mantine 9 –, gemessen, was jede Variante ausliefert, und jeden Fallstrick notiert.
## shadcn/ui vs. MUI vs. Mantine im Überblick
Versionen, Downloads und Sterne mit Stand 7. Oktober 2026, aus npm, GitHub und der jeweiligen Dokumentation. Die wöchentlichen Downloads beziehen sich auf den 28. September bis 4. Oktober.
| | **shadcn/ui** | **MUI (Material UI)** | **Mantine** |
|---|---|---|---|
| Was Sie installieren | Eine CLI; der Quellcode landet in `src/components/ui` | `@mui/material` + `@emotion/react` + `@emotion/styled` | `@mantine/core` + `@mantine/hooks` |
| Aktuelle Version | CLI 4.21.3 | 9.4.0 | 9.7.1 |
| Letzte Major-Version | – (kein versioniertes Komponentenpaket) | v9, angekündigt am 8. April 2026 (v8 übersprungen) | 9.0 am 31. März 2026 |
| Verhalten darunter | **Base UI** (Standard), Radix oder React Aria | Eigene MUI-Komponenten | Eigene, mit Floating UI |
| Styling | Tailwind-CSS-v4-Klassen in Ihrer Kopie | Emotion (CSS-in-JS) | Eine CSS-Datei, auch pro Komponente |
| Look ab Werk | Neutral; acht Stile, standardmäßig Nova | Material Design | Eigener neutraler Stil |
| Lizenz | MIT | MIT im Kern; MUI X Pro und Premium kostenpflichtig | MIT |
| GitHub-Sterne | 125,2k | 99,1k | 31,8k |
| npm-Downloads pro Woche | 13,4 Mio. (die CLI) | 12,5 Mio. | 3,3 Mio. |
| **Mein Benchmark, gzip** | **126,8–154,4 KB** | **140,2 KB** | **163,2 KB** |
Ein Hinweis zu den Downloads: Das Paket `shadcn` ist die CLI, nicht die Komponenten. Ihre App hängt zur Laufzeit nie davon ab, die Zahl misst also CLI-Aufrufe. Aussagekräftiger sind die Primitives: `@base-ui/react` kam auf 19,3 Millionen Downloads pro Woche, `radix-ui` auf 19,1 Millionen.
## Was ist shadcn/ui (und warum ist es keine Bibliothek)?
Die meisten Komponentenbibliotheken funktionieren gleich: Paket installieren, `Button` importieren, Theme konfigurieren. shadcn/ui nicht. Die [Einführung](https://ui.shadcn.com/docs) sagt es klar: *„This is not a component library. It is how you build your component library."*
Wenn Sie `npx shadcn add dialog` ausführen, schreibt die CLI `dialog.tsx` in Ihr Repository. Ab da ist es Ihr Code:
- **Sie bearbeiten ihn direkt.** Anderer Schließen-Button? Datei ändern. Kein Theme-Override, kein Wrapper, kein `!important`.
- **Niemand aktualisiert ihn für Sie.** Ein upstream behobener Bug bleibt in Ihrer Kopie, bis Sie die Änderung übernehmen. Registries helfen Teams, eigene Versionen zu teilen – öffentliche GitHub-Repositories seit Juni, private seit August –, aber der Kompromiss bleibt.
- **Coding-Agenten können ihn lesen.** shadcn vermarktet das ausdrücklich als „AI-Ready": Der Quellcode liegt in Ihrem Repo, ein Agent sieht genau, was er ändert.
Wie viel Code übernehmen Sie? Für die sieben Komponenten meines Benchmarks schrieb die CLI **558 Zeilen** auf Base UI, 581 auf Radix und **925 auf React Aria** – dort kamen eine Input-Group und eine Textarea als Abhängigkeiten dazu.
MUI und Mantine folgen dem umgekehrten Modell. Die Komponenten bleiben in `node_modules`, Sie passen sie über Theme, Props und Slots an, und Fixes kommen mit `npm update` – zusammen mit allen Breaking Changes.
> [!KEY]
> „shadcn vs. MUI" ist eigentlich keine Styling-Frage. Es geht darum, wem der Komponentencode gehört: Ihnen – oder einem Anbieter, dessen Updates Sie verarbeiten müssen.
## Der Benchmark: derselbe Screen in fünf Setups
Damit der Vergleich fair ist, habe ich einen einzigen Screen in jedem Setup gebaut: **Tabs, ein „New project"-Dialog mit Textfeld, Select und Checkbox sowie zwei Buttons** – jeweils so, wie man es in der Bibliothek idiomatisch schreibt.
- **Toolchain:** Vite-8.3-Produktionsbuild, React 19, TypeScript, Standardeinstellungen. Die Größen sind gzip, wie Vite sie ausgibt.
- **shadcn:** angelegt mit `shadcn init -t vite -p nova` und `-b base`, `-b radix` bzw. `-b aria`, danach `shadcn add` für die sieben Komponenten. Diese Builds enthalten die Icon-Bibliothek (lucide-react) und den Theme-Provider aus dem Template; Webfonts sind eigene Dateien und nicht mitgezählt.
- **MUI:** `@mui/material` 9.4 mit Emotion. **Mantine:** `@mantine/core` 9.7.1 mit dem Standard-Import `styles.css` aus der Getting-Started-Anleitung.
- **Basis:** Dieselbe Vite-App nur mit React liefert 68,6 KB gzip. Alle Zahlen unten enthalten diesen Anteil.
- **Pakete:** Ich habe über die Source Maps des Builds gezählt, wie viele verschiedene npm-Pakete im ausgelieferten JavaScript landen.
| Setup | JS gzip | CSS gzip | **Summe** | Über reinem React | npm-Pakete im Bundle | Eigener Code |
|---|---|---|---|---|---|---|
| shadcn/ui + **Radix** | 118,7 KB | 8,1 KB | **126,8 KB** | +58,2 KB | 48 | 581 Zeilen |
| **MUI** 9.4 | 140,2 KB | – (Laufzeit) | **140,2 KB** | +71,7 KB | 24 | – |
| shadcn/ui + **Base UI** | 136,3 KB | 8,0 KB | **144,3 KB** | +75,7 KB | 14 | 558 Zeilen |
| shadcn/ui + **React Aria** | 145,4 KB | 9,0 KB | **154,4 KB** | +85,9 KB | 12 | 925 Zeilen |
| **Mantine** 9.7 | 127,3 KB | 35,9 KB | **163,2 KB** | +94,6 KB | 18 | – |
Was die Zahlen zeigen:
- **Radix war am leichtesten**, obwohl es die meisten Pakete mitbringt. Radix veröffentlicht jede Komponente als eigenes, unabhängig versioniertes Paket – 48 Pakete landeten in diesem Bundle –, aber jedes davon ist klein.
- **Base UI kostete 17,6 KB mehr als Radix** für diese sieben Komponenten, bei deutlich kürzerer Abhängigkeitsliste. Das ist der Preis des neuen Standards auf diesem Screen; mit einem anderen Komponenten-Mix kann es auch anders ausgehen.
- **MUI liefert keine CSS-Datei aus.** Emotion erzeugt die Styles zur Laufzeit in JavaScript, die 140,2 KB sind also komplett JS – relevant für Server-Rendering und strikte Content Security Policies.
- **Mantines JavaScript ist das zweitkleinste** mit 127,3 KB, aber die vollständige `styles.css` bringt 35,9 KB gzip CSS für alle Komponenten mit, ob genutzt oder nicht.
Und die wichtigste Zeile: **Die gesamte Spanne beträgt 36 KB gzip.** Auf einem langsamen Smartphone ist das spürbar, aber kleiner als ein einziges Hero-Bild. Die Bundle-Größe allein sollte das nicht entscheiden – sondern Eigentum am Code, Designsprache und die Komponenten, die Sie sonst selbst bauen müssten.
## shadcn mit Radix vs. Base UI vs. React Aria: welche Basis?
„shadcn vs. Radix" ist der häufigste shadcn-Vergleich in der Suche – und eigentlich die falsche Frage. Radix ist eine von **drei Basen**, auf denen shadcn heute laufen kann. Das hat sich 2026 laut [shadcn-Changelog](https://ui.shadcn.com/docs/changelog) geändert:
- **Dezember 2025:** Mit `npx shadcn create` konnten Sie zwischen Radix und Base UI wählen. Jede Komponente wurde mit derselben Abstraktion für Base UI neu gebaut.
- **Juli 2026: Base UI wird Standard.** shadcns Begründung: Base UI war mit Version 1.6 stabil, lag über 6 Millionen Downloads pro Woche, und Projekte auf shadcn/create wählten es bereits **2 zu 1** gegenüber Radix. Inzwischen ist Base UI bei 1.8.0.
- **Juli 2026: React Aria wird dritte Basis** (`--base aria`), verfügbar in allen acht Stilen.
Genauso wichtig ist, was sich *nicht* geändert hat: **Radix ist nicht abgekündigt.** shadcn schreibt, dass jedes Update und jede neue Komponente für beide Bibliotheken erscheint, außer eine Komponente existiert nur in Base UI, dass Radix bei shadcn selbst weiter in Produktion läuft und dass Sie nicht migrieren müssen: „If your app works, keep shipping."
| | **Base UI** | **Radix** | **React Aria** |
|---|---|---|---|
| Status bei shadcn | Standard seit Juli | Vollständig unterstützt | Dritte Basis seit Juli |
| Init-Flag | `-b base` | `-b radix` | `--base aria` |
| Entwickelt von | Machern von Radix, Material UI, Floating UI | WorkOS | Adobe |
| Kompositions-API | `render`-Prop | `asChild` | React Aria Components (`id`, `defaultSelectedKey`) |
| Mein Benchmark, gzip | 144,3 KB | **126,8 KB** | 154,4 KB |
| npm-Pakete im Bundle | 14 | 48 | 12 |
| Eigener Code, 7 Komponenten | 558 Zeilen | 581 Zeilen | 925 Zeilen |
Wenn Sie migrieren, gibt es bewusst keinen Codemod – Sie haben Ihre Kopien bearbeitet, und genau die würde ein Codemod kaputtmachen. Stattdessen gibt es einen [Skill für Coding-Agenten](https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default) (`pnpm dlx skills add shadcn/ui`, dann „migrate accordion to base-ui"). Er arbeitet Komponente für Komponente, legt pro Komponente einen Commit auf einem Branch an und schreibt einen Bericht über Verhaltensänderungen, die Sie von Hand prüfen. shadcns eigener Test: über 60 Komponenten, davon 36 auf Radix, etwa 25 Minuten bei rund 10.000 Tokens pro Komponente.
Der API-Unterschied, den Sie im Alltag zuerst bemerken, ist die Komposition:
```tsx
// Radix-Basis: asChild
// Base-UI-Basis: render-Prop
}>New project
```
## MUI 9: Was sich geändert hat
MUI ist [direkt von v7 auf v9](https://mui.com/blog/introducing-mui-v9/) gesprungen (angekündigt am 8. April 2026), damit Material UI und MUI X wieder eine gemeinsame Major-Version haben. Für diesen Vergleich zählt vor allem:
- **Neue Komponenten und strengere Barrierefreiheit.** `NumberField` und `Menubar` sind neu. Tabs, Menüs und Stepper nutzen jetzt sauberes Roving-`tabindex` für die Tastaturnavigation, und der Stepper rendert als geordnete Liste.
- **Veraltete APIs sind weg.** Die alten Props `components`/`componentsProps` und `*Props` sind durch `slots` und `slotProps` ersetzt, System-Props wie `` müssen nach `sx` wandern. MUI liefert für das meiste Codemods – siehe den [Upgrade-Guide](https://mui.com/material-ui/migration/upgrade-to-v9/).
- **Höhere Browser-Untergrenze:** Chrome 117, Firefox 121 und Safari 17 sind die neuen Standardziele.
- **Emotion bleibt – vorerst.** MUI will für die nächste Major-Version die Unabhängigkeit von Emotion und eine bessere Tailwind-Integration prüfen.
- **MUI X hat neue Preise.** Seit dem 8. April lizenzieren Pro und Premium pro Anwendung, und Telemetrie für kommerzielle Komponenten ist in Entwicklungs-Builds standardmäßig an (in Produktion aus).
MUIs eigentlicher Vorteil ist nicht der Button, sondern **MUI X**: ein Data Grid mit serverseitigen Funktionen, Date- und Time-Picker, Charts, eine Tree View und neu in v9 Scheduler und Chat als Alpha. Wenn Sie sonst Wochen in ein ordentliches Data Grid stecken würden, kann das allein den Vergleich entscheiden.
## Mantine 9: das Komplettpaket in der Mitte
Mantine liegt zwischen beiden Modellen: eine vollständige npm-Bibliothek wie MUI, aber mit neutralem Look und normalem CSS statt CSS-in-JS. Version 9.0 erschien am 31. März 2026, 9.7.1 am 6. Oktober.
- **React 19.2 oder neuer ist Pflicht** – `@mantine/core` 9 deklariert `react ^19.2.0` als Peer-Dependency. Wer auf React 18 festsitzt, kann Mantine 9 nicht nutzen; MUI und Base UI unterstützen weiterhin React ab 17.
- **Hooks sind dabei.** `@mantine/hooks` (etwa `useDisclosure`, das mein Benchmark-Dialog nutzt) deckt vieles ab, wofür Sie sonst weitere Pakete bräuchten.
- **CSS ist eine echte Datei.** Gut für Server-Rendering und Caching. Der Standard-Import `@mantine/core/styles.css` ist allerdings der größte Einzelposten in meinem Benchmark – 35,9 KB gzip –, weil er die Styles aller Komponenten enthält.
Mantine liefert auch Stylesheets pro Komponente (`@mantine/core/styles/Button.css` usw.), um dieses CSS zu verkleinern. Gehen Sie dabei vorsichtig vor – siehe Fallstrick 5.
## Fünf Fallstricke beim Einrichten
Alle stammen aus dem Aufbau des Benchmarks am 7. Oktober 2026 mit den oben genannten Versionen.
1. **`shadcn init -b base` erzeugte ein Radix-Projekt.** Mit `-t vite` und ohne Preset schrieb die CLI `"style": "new-york"` und installierte `radix-ui` – trotz `-b base`. Mit Preset (`-p nova`) klappte es, und es stand `"style": "base-nova"` drin. Prüfen Sie nach init die `components.json`.
2. **Das Base-UI-Select zeigt den Rohwert.** Bei Radix zeigt `` das Label des gewählten Eintrags („Developer"). Bei Base UI stand dort `dev`, bis ich `items` an die Root übergab – genau das dokumentieren die Base-UI-Typen: Ist `items` gesetzt, rendert `Select.Value` das Label statt des Rohwerts.
3. **Das React-Aria-Template baute nicht auf Anhieb.** Die generierte `label.tsx` importiert `React`, ohne es zu nutzen, und die strikten TypeScript-Einstellungen des Vite-Templates lassen `tsc -b` mit TS6133 scheitern. Import löschen, dann baut es.
4. **Die React-Aria-API ist anders, nicht nur die Engine.** Tabs nutzen `id` und `defaultSelectedKey` statt `value` und `defaultValue`, und der Dialog sitzt innerhalb von `DialogTrigger`. Ein Wechsel der Basis ist eine echte Migration, kein Flag.
5. **Unvollständiges Mantine-CSS scheitert lautlos.** Beim ersten Versuch, nur die Stylesheets pro Komponente zu importieren, fehlten mir einige – Tabs und Buttons waren komplett ungestylt, ohne Fehler und ohne Warnung. Wenn Sie Mantines CSS aufteilen, prüfen Sie jeden Screen visuell.
> [!WARNING]
> Nichts davon ist exotisch. Vier der fünf Fallstricke treten in den ersten zehn Minuten auf dem Standardweg auf – genau dann, wenn Sie entscheiden, welche Bibliothek Sie einsetzen.
## Welche React-UI-Bibliothek sollten Sie wählen?
| Ihre Situation | Wahl | Warum |
|---|---|---|
| Admin- oder Analytics-App mit großen Tabellen, Datepickern, Charts | **MUI + MUI X** | Gepflegte Datenkomponenten, die Sie sonst selbst bauen; planen Sie Pro oder Premium für erweiterte Grid-Funktionen ein |
| Neues Tailwind-Projekt, eigenes Design-System, Coding-Agenten schreiben UI | **shadcn/ui auf Base UI** | Der Code gehört Ihnen; shadcns empfohlener Standard |
| Bestehende shadcn-App auf Radix | **Auf Radix bleiben** | Vollständig unterstützt, kleinstes Bundle in meinem Test; später bei Bedarf mit dem Skill migrieren |
| Kein Tailwind, eine Bibliothek mit Hooks und normalem CSS | **Mantine** | Komplettpaket, neutrales Design – sofern React 19.2+ möglich ist |
| Barrierefreiheit und Internationalisierung sind harte Anforderungen | **shadcn/ui auf React Aria** | Adobes Primitives – mit dem größten Bundle und dem meisten eigenen Code |
| Sie brauchen ausdrücklich Material Design | **MUI** | Die Referenzimplementierung |
## Und Chakra, DaisyUI, HeroUI, Headless UI?
Das sind echte Optionen, nur kleiner in der aktuellen Diskussion. Wöchentliche npm-Downloads vom 28. September bis 4. Oktober:
- **Headless UI** (8,8 Mio.) – die ungestylten Komponenten von Tailwind Labs. Näher an Radix oder Base UI als an shadcn: Das Styling schreiben Sie komplett selbst.
- **Chakra UI** (2,0 Mio.) – eine gestylte Bibliothek mit Style-Props, im Geist ähnlich wie Mantine.
- **Ark UI** (1,2 Mio.) – Headless-Komponenten vom Chakra-Team.
- **DaisyUI** (1,2 Mio.) – ein Tailwind-Plugin mit CSS-Klassennamen, ganz ohne React-Komponenten.
- **HeroUI** (0,8 Mio.) – früher NextUI, eine gestylte Bibliothek auf Tailwind-Basis.
Wenn Sie ohnehin Ihr Build-Tooling vergleichen: Mein [Biome-Benchmark](https://www.alekseialeinikov.com/de/blog/topics/programming/biome-2026-eslint-prettier-ersetzen-benchmark), der [Test es-toolkit vs. lodash](https://www.alekseialeinikov.com/de/blog/topics/programming/es-toolkit-2026-die-lodash-alternative-2x-schneller-97-kleiner) und der [Leitfaden von Jest zu Vitest](https://www.alekseialeinikov.com/de/blog/topics/programming/von-jest-zu-vitest-migrieren) folgen demselben Ansatz: selbst messen.
## Fazit
Die drei Bibliotheken liegen näher beieinander, als ihre Fans behaupten – 36 KB gzip trennen das leichteste und das schwerste Setup in meinem Test. Was sie wirklich unterscheidet, ist das Eigentum am Code. shadcn/ui gibt Ihnen den Code und setzt ihn seit Juli standardmäßig auf Base UI; MUI und Mantine behalten den Code und liefern Ihnen Updates.
Lebt Ihre App von Data Grids, nehmen Sie MUI. Wollen Sie eine aufgeräumte Bibliothek ohne Tailwind, nehmen Sie Mantine. Für ein neues Tailwind-Projekt starten Sie mit shadcn auf Base UI – und wenn Sie shadcn schon auf Radix nutzen und alles läuft, folgen Sie shadcns eigenem Rat: keep shipping.