shadcn vs MUI 2026: Welche React-UI-Bibliothek passt?

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 (opens in a new tab), die zu shadcn/ui von ui.shadcn.com (opens in a new tab), 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.

Wie schneiden shadcn/ui, MUI und Wingo UI im Vergleich ab?

Wie installierst du die Bibliotheken, und wem gehört danach der Code?

MUI installierst du wie jede andere Dependency:

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:

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 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 (opens in a new tab).

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:

import { UIProvider } from "@/lib/ui-config";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <UIProvider defaults={{ button: { radius: "full" }, dialog: { size: "sm" } }}>
          {children}
        </UIProvider>
      </body>
    </html>
  );
}

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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) ist ein Guide, wie du deine eigene Tabelle auf TanStack Table v9 baust, und der Date Picker (opens in a new tab) 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 ist auf TanStack Table v9 gebaut, mit Suche, Filtern, Sortierung, Sammelaktionen, Pinning, Resizing und Virtualisierung, und unter 768px werden ihre Zeilen zu Karten:

"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<Order>();
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 (
    <DataTable
      data={orders}
      columns={columns}
      caption="Bestellungen"
      locale="en-US"
      selectionMode="multiple"
      searchPlaceholder="Bestellungen suchen"
    />
  );
}

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

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 (opens in a new tab) zeigen einen responsiven Vollbild-Dialog, gesteuert über useMediaQuery(theme.breakpoints.down('md')), und SwipeableDrawer (opens in a new tab) 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 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:

"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 (
    <Dialog
      trigger={
        <Button variant="soft" leftIcon={<Pencil />}>
          Bearbeiten
        </Button>
      }
      title="Inserat bearbeiten"
      description="Käufer sehen deine Änderungen sofort."
      closeLabel="Dialog schließen"
      footer={
        <>
          <DialogClose asChild>
            <Button variant="soft">Abbrechen</Button>
          </DialogClose>
          <Button loading={saving} loadingText="Wird gespeichert" onClick={onSave}>
            Speichern
          </Button>
        </>
      }
    >
      <p className="text-sm text-muted-foreground">Titel, Preis, Stadt und Beschreibung</p>
    </Dialog>
  );
}

Der 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 (opens in a new tab) 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 vergleicht es mit Chakra UI, Ant Design, React Aria und weiteren Bibliotheken. Unsere Vergleiche Mantine vs shadcn und 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, was eine kostenpflichtige Registry nach demselben Modell zusätzlich bringt. Weitere Vergleiche findest du unter Vergleiche und Alternativen.

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.

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.