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 – 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.

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 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.

„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.

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 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.”

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

// Radix-Basis: asChild
<DialogTrigger asChild>
  <Button>New project</Button>
</DialogTrigger>

// Base-UI-Basis: render-Prop
<DialogTrigger render={<Button />}>New project</DialogTrigger>

MUI 9: Was sich geändert hat

MUI ist direkt von v7 auf 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 <Box mt={2}> müssen nach sx wandern. MUI liefert für das meiste Codemods – siehe den Upgrade-Guide.
• 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 <SelectValue /> 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.

Welche React-UI-Bibliothek sollten Sie wählen?

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, der Test es-toolkit vs. lodash und der Leitfaden von Jest zu Vitest 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.