# shadcn vs MUI 2026: Welche React-UI-Bibliothek passt?
> shadcn vs MUI, Stand Oktober 2026: eigener Tailwind-Code oder ein Material-Paket von npm? Wir vergleichen Theming, Next.js, Data Grids, Lizenzen und Mobile.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 13. Okt. 2026
- Kategorie: [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/shadcn-vs-mui
- Englische Fassung: https://wingo-ui.com/blog/shadcn-vs-mui
## Kurz gesagt
Nimm MUI, wenn du Material Design willst, ein npm-Paket, das andere pflegen, und das MUI X Data Grid samt Date Pickern für datenlastige Screens. Nimm shadcn/ui, wenn dir der Quellcode der Komponenten gehören soll, du mit Tailwind CSS stylst und deine Server Components frei von einer Styling-Runtime bleiben sollen. Wingo UI folgt dem shadcn-Modell und ergänzt, was MUI hat und shadcn/ui dir überlässt: eine vollständige Data Table, typisierte Date Picker und Overlays, die auf dem Smartphone zu Bottom Sheets werden.
Bei shadcn vs MUI sieht die Wahl nach einer Stilfrage aus, Tailwind gegen Material Design. In Wahrheit geht es darum, wem der Code gehört. MUI ist ein npm-Paket mit eigener Styling-Engine: Du installierst es, passt es über ein Theme an und aktualisierst es mit `npm update`. shadcn/ui kopiert den Quellcode der Komponenten in dein Projekt: Du bearbeitest die Dateien, und das Styling ist ganz normales Tailwind CSS. Alles Weitere in diesem Vergleich, von Server Components bis zum Data Grid, folgt aus dieser Trennung.
Wir bauen Wingo UI, eine kostenpflichtige Bibliothek nach dem shadcn-Modell. Sie taucht unten deshalb als dritte Spalte auf, für alle, die „Wingo UI vs MUI“ suchen. Die Fakten zu MUI stammen von [mui.com](https://mui.com/pricing/), die zu shadcn/ui von [ui.shadcn.com](https://ui.shadcn.com/docs/changelog), alles geprüft am 13. Oktober 2026. Wo MUI die bessere Wahl ist, sagen wir das. Den ganzen Markt findest du in unserem [Guide zu shadcn-Alternativen](https://wingo-ui.com/de/blog/shadcn-alternatives).
## Wie schneiden shadcn/ui, MUI und Wingo UI im Vergleich ab?
| | shadcn/ui | MUI (Material UI 9.5 + MUI X) | Wingo UI |
| --- | --- | --- | --- |
| Modell | CLI kopiert den Code in dein Projekt | npm-Pakete ([Installation](https://mui.com/material-ui/getting-started/installation/)) | CLI kopiert den Code; kompatibel mit der shadcn Registry |
| Styling | Tailwind CSS, CSS-Variablen | Standardmäßig Emotion; Pigment CSS in früher Alpha | Tailwind CSS v4, Tokens als CSS-Variablen |
| Designsprache | Neutral, zum Umstylen gedacht | Material Design (zweite Iteration) | Neutrale Tokens, Hell und Dunkel |
| Primitives | Base UI (Standard), Radix oder React Aria | MUIs eigene | Radix, vaul, Motion |
| Lizenz | MIT | MIT für den Kern und MUI X Community; MUI X Pro und Premium kommerziell | Lizenz pro Entwickler; 75 von 342 Einträgen kostenlos |
| Preis | Kostenlos | Kostenlos; [MUI X](https://mui.com/pricing/) Pro $299, Premium $599, Enterprise $1,399 pro Entwickler und Jahr | Free-Plan; Pro $8 im Monat, $80 im Jahr oder $150 einmalig |
| Data Grid | Guide auf TanStack Table v9 | Data Grid (MIT), Features in Pro und Premium | Data Table auf TanStack Table v9 (Pro) |
| Date Picker | Popover plus Calendar zusammengesetzt | Date Pickers (MIT), Range Picker in Pro | Date Picker, Date Range Picker (Pro) |
| Mobile | Drawer; Rezept aus Dialog plus Drawer | SwipeableDrawer; Vollbild-Dialog mit `useMediaQuery`; Picker wechseln auf Touch zu einem Modal | Overlays und Picker werden unter 768px zu Bottom Sheets; Tabellen werden zu Karten |
| KI-Agenten | MCP-Server, der aus Registries installiert, Skill | [MCP-Server](https://mui.com/material-ui/getting-started/mcp/) für die Doku (`@mui/mcp`) | [MCP-Server](https://wingo-ui.com/docs/mcp) mit Update-Checks, Regeldateien für fünf Agenten |
## Wie installierst du die Bibliotheken, und wem gehört danach der Code?
MUI installierst du wie jede andere Dependency:
```bash
npm install @mui/material @emotion/react @emotion/styled
```
Den Quellcode der Komponenten siehst du nie. Anpassen läuft über das Theme, den Prop `sx` und `styled()`, und ein Update ist ein Versionssprung plus Migrationsguide. Das ist ein echter Vorteil: Das Team von MUI kümmert sich um Focus Traps, Transitions und Randfälle, und dein Diff bleibt klein.
shadcn/ui und Wingo UI legen die Dateien in `components/ui` ab:
```bash
npx shadcn@latest add dialog
npx wingo-ui@latest add dialog
```
Du kannst jede Zeile ändern, und nichts geht kaputt, wenn ein Paket eine neue Major-Version veröffentlicht. Der Preis dafür: Upstream-Fixes kommen nicht mehr von selbst. Die shadcn CLI zeigt dir den Unterschied mit `add --diff` und überlässt dir das Zusammenführen. Die CLI von Wingo UI behält deine installierte Kopie und führt mit `npx wingo-ui@latest update` einen 3-Way-Merge aus, wie die [Installationsanleitung](https://wingo-ui.com/docs/installation) erklärt.
## Wie unterscheidet sich das Theming?
Bei Material UI vs shadcn merkst du den Unterschied im Alltag hier am deutlichsten. Bei MUI läuft das Theming über JavaScript. `createTheme` baut ein Theme-Objekt (Palette, Typografie, Abstände, Breakpoints, Overrides pro Komponente), und `ThemeProvider` reicht es über React Context nach unten. Mit `cssVariables: true` schreibt MUI das Theme zusätzlich als CSS-Variablen wie `--mui-palette-primary-main`, so steht es in den [Theming-Docs](https://mui.com/material-ui/customization/theming/).
Bei shadcn/ui und Wingo UI läuft das Theming über CSS. Die Tokens stehen als CSS-Variablen in deinem globalen Stylesheet, Tailwind-Utilities lesen sie, und Dark Mode ist ein zweiter Satz Werte. Wingo UI legt zwei Ebenen obendrauf: Jeder visuelle Aspekt einer Komponente ist ein Prop mit Default, und `UIProvider` setzt app-weite Defaults. Eine Änderung an Radius oder Größe passiert so an einer einzigen Stelle:
```tsx
import { UIProvider } from "@/lib/ui-config";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Arbeitet dein Designteam mit Material Design, bringt dich das Theme von MUI mit dem geringsten Aufwand ans Ziel. Hat dein Produkt einen eigenen Look, überschreibst du die Material-Defaults Komponente für Komponente, und ein neutraler Satz Tokens ist der leichtere Start.
## Was passt besser zum Next.js App Router und zu Server Components?
Alle drei laufen im App Router. Der Unterschied liegt darin, was wo läuft.
Die [Next.js-Integration](https://mui.com/material-ui/integrations/nextjs/) von MUI verlangt, dass du `@mui/material-nextjs` installierst und das Root Layout in den `AppRouterCacheProvider` packst. Der sammelt das von Emotion erzeugte CSS auf dem Server ein. Die Theme-Datei braucht `'use client'`, und laut Guide braucht es in Next.js 16 einen kleinen Client-Wrapper, wenn du einen Next.js-`Link` an MUIs Prop `component` übergibst. MUIs eigener [Guide zu Pigment CSS](https://mui.com/material-ui/migration/migrating-to-pigment-css/) schreibt selbst, dass Emotion React Server Components nicht vollständig unterstützt. Pigment CSS soll diese Lücke schließen, ist aber in früher Alpha und unterstützt Next.js mit webpack, nicht mit Turbopack, Stand Oktober 2026.
Bei shadcn/ui und Wingo UI sind die Styles Tailwind-Klassen, die beim Build kompiliert werden. Es gibt also keine Styling-Runtime und keinen Cache Provider. Interaktive Komponenten wie ein Dialog beginnen trotzdem mit `"use client"`, und deine Seiten bleiben Server Components, die sie rendern. Auch der `UIProvider` von Wingo UI ist eine Client Component, und das Root Layout bleibt trotzdem eine Server Component.
Zur Bundle-Größe: Wir haben keine der beiden Seiten gemessen, also nennen wir keine Kilobytes. Die strukturellen Fakten: MUI liefert die Runtime von Emotion zusammen mit den Komponenten, die du importierst. shadcn/ui und Wingo UI liefern nur die Komponentendateien, die du kopiert hast, plus deren Dependencies (Radix oder Base UI, bei Wingo UI zusätzlich Motion für die Animationen).
## Wer hat das bessere Data Grid und die besseren Date Picker?
MUI, wenn du die volle Bandbreite brauchst. Das MUI X Data Grid ist unter MIT kostenlos und deckt Sortieren, Filtern, Paginierung und Bearbeiten ab. Laut der [Lizenzseite von MUI X](https://mui.com/x/introduction/licensing/) bringt Pro Multi-Filter, Multi-Sort, Column Resizing und Column Pinning, Premium ergänzt Row Grouping und Excel-Export. Ohne gültigen Key zeigen Pro- und Premium-Komponenten ein Wasserzeichen und eine Warnung in der Konsole. Die Date Pickers sind kostenlos, die Range Picker für Datum und Uhrzeit brauchen Pro, und die Picker brauchen einen `LocalizationProvider` mit Adapter für Day.js, date-fns, Luxon oder Moment.
shadcn/ui gibt dir stattdessen Bausteine. Die Seite zur [Data Table](https://ui.shadcn.com/docs/components/data-table) ist ein Guide, wie du deine eigene Tabelle auf TanStack Table v9 baust, und der [Date Picker](https://ui.shadcn.com/docs/components/date-picker) ist eine Komposition aus Popover und Calendar ohne Root-Komponente. Das ist ideal, wenn jede Tabelle deiner App anders ist, und teuer, wenn zwanzig Screens dieselbe brauchen.
Wingo UI liegt dazwischen: fertige Komponenten, aber Code, der dir gehört. Die [Data Table](https://wingo-ui.com/components/data-table) ist auf TanStack Table v9 gebaut, mit Suche, Filtern, Sortierung, Sammelaktionen, Pinning, Resizing und Virtualisierung, und unter 768px werden ihre Zeilen zu Karten:
```tsx
"use client";
import { DataTable, createColumns } from "@/components/ui/data-table";
type Order = { id: string; customer: string; city: string; status: string; total: number };
const col = createColumns();
const columns = col([
col.accessor("customer", { header: "Kunde", filter: "text", mobile: "title" }),
col.accessor("city", { header: "Stadt", filter: "multi-select", mobile: "subtitle" }),
col.accessor("status", {
header: "Status",
type: "badge",
badge: { Paid: { tone: "success" }, Refunded: { tone: "warning" }, Failed: { tone: "danger" } },
filter: "multi-select",
}),
col.accessor("total", { header: "Summe", type: "currency", footer: "sum" }),
]);
export function Orders({ orders }: { orders: Order[] }) {
return (
);
}
```
> Live-Demo (Data Table): Such nach einem Kunden, schalte den Chip „Overdue“ ein und sortiere oder filtere dann über die Toolbar; in einem schmalen Rahmen wird jede Zeile zu einer Karte. Probier sie unter [Data Table](https://wingo-ui.com/components/data-table) aus und installier sie mit `npx wingo-ui@latest add data-table`.
Der [Date Picker](https://wingo-ui.com/components/date-picker) ist ein typisiertes Feld: Er parst Datumsangaben in der übergebenen Locale, nimmt Grenzen, gesperrte Tage und Presets an und braucht weder Provider noch Adapter, weil er date-fns direkt nutzt. Ein Date Range Picker deckt Reports und Buchungen ab. Beide sind Pro, und den Rest der Tabellenfamilie findest du unter [Tables and Lists](https://wingo-ui.com/components/category/tables).
Die ehrlichen Grenzen: MUI X bietet für Enterprise-Grids mehr Funktionen, etwa Row Grouping, Pivoting und Excel-Export, dazu einen Scheduler. Stehen diese Dinge auf deiner Roadmap, ist MUI X Premium die sicherere Wahl.
## Wie verhalten sie sich auf dem Smartphone?
MUI gibt dir die Teile und überlässt dir den Wechsel. Die [Dialog-Docs](https://mui.com/material-ui/react-dialog/) zeigen einen responsiven Vollbild-Dialog, gesteuert über `useMediaQuery(theme.breakpoints.down('md'))`, und [SwipeableDrawer](https://mui.com/material-ui/react-drawer/) bringt Wischgesten mit, samt Hinweis, dass einige Low-End-Geräte dem Finger nicht mit 60 FPS folgen können. Die Date Picker wechseln von selbst: Die Desktop-Variante rendert, wenn `@media (pointer: fine)` zutrifft, sonst erscheint ein Modal.
shadcn/ui hat einen Drawer und dokumentiert ein Rezept aus Dialog plus Drawer, das du für jedes Overlay wiederholst.
Wingo UI baut den Wechsel in jede Komponente ein. Der [Dialog](https://wingo-ui.com/components/dialog) ist auf dem Desktop eine Karte, die mit einer Spring-Animation hereinskaliert, und über seinen Prop `responsive` (Default `true`) unter 768px ein ziehbares Bottom Sheet mit Safe-Area-Abstand:
```tsx
"use client";
import { Pencil } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogClose } from "@/components/ui/dialog";
export function EditListing({ saving, onSave }: { saving: boolean; onSave: () => void }) {
return (
}>
Bearbeiten
}
title="Inserat bearbeiten"
description="Käufer sehen deine Änderungen sofort."
closeLabel="Dialog schließen"
footer={
<>
}
>
Titel, Preis, Stadt und Beschreibung
);
}
```
> Live-Demo (Dialog): Öffne den Dialog: Auf einem breiten Bildschirm skaliert er als Karte herein, in einem Rahmen mit Smartphone-Breite gleitet er als Sheet hoch, das du zum Schließen nach unten ziehst. Probier sie unter [Dialog](https://wingo-ui.com/components/dialog) aus und installier sie mit `npx wingo-ui@latest add dialog`.
Der [Button](https://wingo-ui.com/components/button) wächst in der mittleren Größe auf Touchscreens von 40px auf 44px, und die kleine Größe behält ihren Look mit einer Trefferfläche von 44px.
## Wie steht es um Barrierefreiheit?
Alle drei bauen auf barrierefreien Primitives auf, doch keine macht deine App von allein barrierefrei. MUI veröffentlicht einen [Entwurf eines WCAG-2.2-Konformitätsberichts](https://mui.com/material-ui/getting-started/accessibility/) für Material UI 9.5.0. Er deckt 12 Komponenten ab und meldet 27 von 32 geprüften Kriterien als voll unterstützt und 5 als teilweise unterstützt. shadcn/ui erbt Tastatur- und ARIA-Verhalten von Base UI, Radix oder React Aria. Wingo UI baut auf Radix auf, mit sichtbaren Fokusringen, voller Tastaturbedienung in Pickern und Menüs und Unterstützung für reduzierte Bewegung in den Animationen. Gehört dir der Code, behebst du einen Accessibility-Bug noch am selben Tag; bei einem Paket eröffnest du ein Issue oder überschreibst das Verhalten.
## Wie kommen Coding-Agenten mit den drei Bibliotheken zurecht?
Der MCP-Server von MUI (`claude mcp add mui-mcp -- npx -y @mui/mcp@latest`) holt die offizielle Doku und Beispiele, damit der Agent echte Props nennt. Der MCP-Server von shadcn durchsucht und installiert Einträge aus jeder Registry in `components.json`. Der Server von Wingo UI liefert Props mit Defaults, Designregeln und Theme-Tokens und prüft installierte Versionen auf Updates; `npx wingo-ui@latest agents install` schreibt Regeldateien für Claude Code, Codex, Gemini CLI, Grok und Cursor.
Bei einem Paket bekommt ein Agent, der einen Prop rät, einen Typfehler. Bei kopiertem Code kann der Agent die Komponente selbst bearbeiten, deshalb zählen korrekte Props und Regeln dort mehr.
## shadcn oder MUI für Next.js: Was solltest du nehmen?
- **Ein internes Admin-Tool, bei dem Material Design passt und die Grids viel können müssen:** MUI mit MUI X. Es hat die umfangreichsten Datenkomponenten, und Material ist ein stimmiger Default für Backoffices.
- **Eine Marketing- oder Content-Seite auf Next.js:** shadcn/ui. Keine Styling-Runtime, überall Tailwind, und du stylst frei um.
- **Eine Mobile-first Web-App, die auf Smartphones und Desktops genutzt wird:** shadcn/ui als Basis plus Wingo UI, oder Wingo UI allein, weil Sheets, Touch Targets und Tabellen als Karten schon eingebaut sind.
- **Ein Design System, das dir gehört:** shadcn/ui, oder direkt Base UI oder React Aria. Den Code zu besitzen ist hier der Sinn der Sache.
- **Ein Team, das sich gar nicht um Komponentenpflege kümmern will:** MUI. Paket-Updates sind bequemer als das Zusammenführen kopierter Dateien.
Steigst du von MUI um, statt neu anzufangen, ersetz zuerst das Data Grid und die Date Pickers, denn davon hängen deine Screens am stärksten ab. Mantine, ein kostenloses npm-Paket mit eigenen Formularen und Datumskomponenten, ist eine weitere Option jenseits des Material-Looks; der [Guide zu MUI-Alternativen](https://wingo-ui.com/de/blog/mui-alternatives) vergleicht es mit Chakra UI, Ant Design, React Aria und weiteren Bibliotheken. Unsere Vergleiche [Mantine vs shadcn](https://wingo-ui.com/de/blog/mantine-vs-shadcn) und [Chakra UI vs shadcn](https://wingo-ui.com/de/blog/chakra-ui-vs-shadcn) nehmen sich diese beiden im direkten Duell vor. Geht die Richtung zu shadcn/ui, zeigt unser [Vergleich Wingo UI vs shadcn/ui](https://wingo-ui.com/de/blog/wingo-ui-vs-shadcn), was eine kostenpflichtige Registry nach demselben Modell zusätzlich bringt. Weitere Vergleiche findest du unter [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons).
Egal, wohin du bei MUI vs shadcn tendierst: Am schnellsten spürst du den Unterschied, wenn du ein Overlay auf deinem eigenen Smartphone öffnest. Installier den kostenlosen Dialog mit `npx wingo-ui@latest add dialog`, render ihn neben deinem aktuellen Dialog aus MUI oder shadcn/ui und vergleich beide bei 390px.
## Komponenten in diesem Artikel
- [Button](https://wingo-ui.com/components/button) (Free): The React button component every screen starts with: five variants, six tones, all sizes, and a loading state that never jumps. Installation: `npx wingo-ui@latest add button`
- [Data Table](https://wingo-ui.com/components/data-table) (Pro): A React data table on TanStack Table: search, filters, sorting, bulk actions, pinning, resizing, virtualization and cards on phones. Installation: `npx wingo-ui@latest add data-table`
- [Date Picker](https://wingo-ui.com/components/date-picker) (Pro): A React date picker: type a date in your locale or pick it from a calendar, with presets, limits, optional time and a phone sheet. Installation: `npx wingo-ui@latest add date-picker`
- [Dialog](https://wingo-ui.com/components/dialog) (Free): A React modal dialog for focused tasks: a spring-scaled card on desktop and a bottom sheet on phones, with nesting and scrolling. Installation: `npx wingo-ui@latest add dialog`
## Häufige Fragen
### Ist shadcn besser als MUI?
Keine der beiden ist überall besser. shadcn/ui gibt dir Code, der dir gehört, und kostenloses Styling mit Tailwind CSS. MUI gibt dir ein gepflegtes npm-Paket mit Material Design und den umfangreichsten Datenkomponenten, von denen einige kostenpflichtig sind.
### Ist MUI für kommerzielle Projekte kostenlos?
Material UI und die Community-Pakete von MUI X (Data Grid, Date Pickers, Charts, Tree View) stehen unter MIT und sind kostenlos. Fortgeschrittene Features wie Column Pinning und Row Grouping im Data Grid, Excel-Export und die Date Range Picker brauchen MUI X Pro ($299) oder Premium ($599) pro Entwickler und Jahr, Stand Oktober 2026.
### Funktioniert MUI mit dem Next.js App Router?
Ja. Installier @mui/material-nextjs und leg den AppRouterCacheProvider um das Root Layout; er sammelt das CSS von Emotion auf dem Server ein. Die Komponenten und das Theme von MUI laufen trotzdem als Client Components, also lass deine Seiten Server Components sein und render MUI darunter.
### Kann ich Tailwind CSS mit MUI nutzen?
Ja, aber dann betreibst du zwei Styling-Systeme. Der Next.js-Guide von MUI beschreibt die Option enableCssLayer, die MUIs Styles in @layer mui packt, damit sie neben anderen Styling-Lösungen laufen; stylst du fast alles mit Tailwind, ist eine Tailwind-native Bibliothek der einfachere Stack.
### Was ersetzt das MUI Data Grid in einem shadcn-Projekt?
shadcn/ui hat einen Guide, wie du deine eigene Tabelle auf TanStack Table v9 baust. Willst du eine fertige Komponente, ist die Data Table von Wingo UI auf TanStack Table v9 gebaut, mit Filtern, Sortierung, Sammelaktionen, Pinning, Virtualisierung und Zeilen als Karten auf dem Smartphone; sie ist eine Pro-Komponente.
---
Quelle: https://wingo-ui.com/de/blog/shadcn-vs-mui