14 shadcn Alternativen 2026: Preis, Mobile und MCP

Wer zwischen shadcn Alternativen wählt, schaut meist zuerst darauf, wie eine Bibliothek installiert wird und wie sie aussieht. Die Fragen, die ein Projekt wirklich entscheiden, kommen später: Was passiert mit den kopierten Dateien, wenn upstream einen Bug behebt? Öffnet sich das Select, das du auslieferst, auf einem 390px-Smartphone als etwas Brauchbares? Und kann Claude Code oder Cursor echte Props nachschlagen, statt sie zu raten? Dieser Guide beantwortet diese Fragen für 14 Bibliotheken, mit Preisen, Lizenzen und Features, geprüft im Oktober 2026 und mit Links zu den Seiten, die wir gelesen haben.

Wir bauen Wingo UI, eine der kostenpflichtigen Optionen unten. Lies den Text also als Sicht eines Anbieters, belegt mit Quellen. Er behandelt Open Source shadcn Alternativen ebenso wie kostenpflichtige und sagt klar, wo eine andere Bibliothek die bessere Wahl ist. Weitere direkte Vergleiche findest du unter Vergleiche und Alternativen.

Was ist die beste Alternative zu shadcn UI?

Die eine beste Alternative zu shadcn UI gibt es nicht, denn shadcn/ui ist drei Dinge auf einmal: ein Weg, Code zu verteilen (eine CLI, die Quelldateien in dein Projekt kopiert), ein Satz Primitives darunter (Base UI, Radix oder React Aria) und ein visueller Stil. Entscheide, welchen der drei Teile du ersetzen willst, dann schrumpft die Auswahl schnell:

• Das Modell behalten, die Komponenten wechseln. coss ui für kostenlose MIT-Komponenten auf Base UI, Magic UI oder Aceternity UI für animierte Landing Pages, Untitled UI React für ein Kit, das zur Figma-Datei von Untitled UI passt, Wingo UI für Mobile-first-Komponenten in Apps, mit MCP-Server und Updates, die in bearbeitete Dateien gemergt werden.
• Das Modell verlassen, ein Paket installieren. Mantine für einen kostenlosen Satz mit Formularen, Datumsfeldern und Charts, MUI, wenn du das Data Grid und die Picker von MUI X brauchst, Chakra UI für Style Props, HeroUI für React Aria und Tailwind CSS v4 in einem npm-Paket, Ant Design für dichte Enterprise-Backoffices.
• Die Primitives behalten, den Look weglassen. Base UI, React Aria Components oder Radix Primitives, von dir gestylt.
• React verlassen. daisyUI, ein Satz Klassennamen für Tailwind CSS, der mit jedem Framework funktioniert.

Trifft keiner dieser Gründe auf dich zu, ist es vielleicht am besten, zu bleiben, wo du bist. Darum geht es im Abschnitt kurz vor dem Ende.

Was hat sich 2026 bei shadcn/ui geändert?

Die größte Änderung: Seit Juli 2026 starten neue shadcn/ui-Projekte auf Base UI statt auf Radix. Der Changelog-Eintrag vom Juli 2026 (opens in a new tab) machte Base UI zum Standard für npx shadcn init und für die Doku. Radix bleibt über npx shadcn init -b radix voll unterstützt, und laut dem Eintrag wählten auf shadcn/create angelegte Projekte schon vorher im Verhältnis 2 zu 1 Base UI statt Radix. Im selben Monat wurde React Aria zur dritten Basis (opens in a new tab) (--base aria).

Weitere Änderungen, die beim Vergleichen zählen:

• Der Drawer (opens in a new tab) nutzt in Base-UI-Projekten jetzt den Drawer von Base UI statt Vaul. Die Radix-Version nutzt weiter Vaul.
• Im Juni 2026 kamen Komponenten für Chat-Oberflächen dazu, im Juli 2026 ein Toast auf Base UI, und im September 2026 zog cn in ein eigenes Paket (opens in a new tab), sodass Komponenten es aus cn statt aus @/lib/utils importieren. Was der neue Toast neben Sonner bedeutet, steht in unserem Vergleich der Sonner-Alternativen.
• Auf der Agenten-Seite gibt es einen MCP-Server (opens in a new tab), der jede Registry in components.json durchsucht und daraus installiert, und einen Skill (opens in a new tab) (npx skills add shadcn/ui), der deine Projektkonfiguration liest, bevor der Agent Code schreibt.

Daraus folgt zweierlei. Die Beschreibung von shadcn/ui als „Radix plus Tailwind“ ist veraltet, und eine für Radix geschriebene Registry verlangt in einem neuen Base-UI-Projekt Sorgfalt. Und das Modell, den Code zu kopieren, ist zur Plattform geworden: Registries anderer Anbieter installierst du mit demselben Befehl shadcn add, eine Alternative auszuprobieren heißt also nicht mehr, ein neues Tool zu lernen.

Wie schneiden die shadcn Alternativen im Vergleich ab?

Die Tabellen unten sind die kurze Antwort, geprüft im Oktober 2026. „Mobile“ nennt nur, was die Doku jeder Bibliothek über ein responsives Layout hinaus für Smartphones zeigt, und „Agenten“, was ein Coding-Agent nutzen kann. Die Preise sind Listenpreise am Tag der Prüfung; mehrere Anbieter zeigten einen Rabatt auf einen höheren Preis.

Bibliotheken, die den Code in dein Projekt legen

Pakete und Primitives

Zwei Bibliotheken fehlen absichtlich in den Tabellen. Radix Primitives wird weiter gepflegt und ist weiter die Basis vieler Registries, auch unserer; es taucht im Abschnitt über Headless Primitives auf. Tailwind Plus vom Team hinter Tailwind CSS verkaufte seine Komponenten, Vorlagen und das Catalyst UI Kit als Einmalkauf mit lebenslangem Zugang (opens in a new tab), hat aber am 9. September 2026 die Anmeldung für Neukunden geschlossen (opens in a new tab); unser Guide zu Tailwind-Plus-Alternativen zeigt, was an seine Stelle tritt.

Welche Alternativen behalten das shadcn-Modell?

coss ui, Magic UI, Aceternity UI, Untitled UI React und Wingo UI legen alle den Code in dein Repository, und alle außer Untitled UI installierst du über die shadcn CLI. Sie unterscheiden sich darin, was sie abdecken und was nach dem Kopieren passiert.

coss ui kommt shadcn/ui mit einem anderen Design am nächsten. Die Komponenten der Registry sind MIT-lizenziert, von Anfang an auf Base UI gebaut, decken die App-Grundlagen von Accordion und Dialog bis Toast und Tooltip ab und bringen eine Migrationsanleitung von shadcn/ui und Radix mit. Das Repository (opens in a new tab) hält außerdem Origin UI, die Radix-basierte Registry, aus der coss ui hervorging, als Legacy-Snapshot mit eingeschränktem Support. Hat dir shadcn/ui gefallen und willst du kostenlos mehr Komponenten auf der neuen Standardbasis, fang hier an.

Magic UI und Aceternity UI sind Effekt-Bibliotheken für Marketingseiten: animierte Hintergründe, Marquees, Hero-Sections und komplette Landing-Page-Vorlagen. Sie ergänzen shadcn/ui eher, als es zu ersetzen, denn keine von beiden deckt die Formulare, Menüs und Overlays ab, die eine App braucht. Die kostenlosen Komponenten von Magic UI sind MIT; Aceternity nutzt eine eigene Lizenz, nach der du die Quelldateien nicht weiterverbreiten darfst. Lies sie also, bevor du die Dateien in einem öffentlichen Repository veröffentlichst.

Untitled UI React ist die Code-Seite des Figma-Kits von Untitled UI, installiert mit eigener CLI (npx untitledui@latest add) oder über npm. Die kostenlose Basis ist MIT; die PRO-Stufe ist ein Einmalkauf, gestaffelt nach Anzahl der Plätze, und bringt Hunderte Komponenten, Dashboards und Seitenbeispiele mit, Drawer, Modals und Command Menus inklusive. Sie ist die naheliegende Wahl, wenn deine Designer schon mit der Figma-Datei von Untitled UI arbeiten.

Wingo UI ist unsere. Release 1.7.0 hat 326 Einträge: 218 Komponenten, 72 Blocks und Seitenvorlagen, 17 Hooks und 19 Helfer, davon 75 kostenlos. Jede Komponente ist für Apps gebaut, die Leute auf dem Smartphone öffnen, wie der Mobile-Abschnitt unten zeigt. Jeder visuelle Aspekt ist eine Prop mit Default, und die CLI mergt neue Releases in Dateien, die du bearbeitet hast. Die Schwächen: Sie ist jünger und hat eine viel kleinere Community als shadcn/ui, sie ist nur für React, sie baut auf Radix (in einem Base-UI-Projekt hättest du also zwei Primitive-Bibliotheken), und die meisten Einträge brauchen einen bezahlten Plan. Der Vergleich Wingo UI vs shadcn/ui stellt beide bei Lizenz, Preis, Verhalten auf Mobile und Updates nebeneinander.

Welche Alternativen kommen als npm-Paket?

Mantine, MUI, Chakra UI, HeroUI und Ant Design. Du aktualisierst mit npm update, statt Dateien zu mergen, und passt über die Theme- und Style-APIs der Bibliothek an, statt den Komponentencode zu ändern. Für viele Teams lohnt sich das: Jemand anders behebt den Focus Trap im Date Picker, und du siehst die Datei nie.

Mantine 9 ist durchgehend kostenlos und MIT: Komponenten, Hooks, eine Formularbibliothek, Datumsfelder und Charts. Tailwind CSS nutzt es nicht; die eigene FAQ hat eine Seite zu den Grenzen, wenn man fremdes Styling dazumischt. Der KI-Guide (opens in a new tab) dokumentiert llms.txt, Skills und einen MCP-Server, dessen Tool get_item_props die Props einer Komponente oder die Signatur eines Hooks zurückgibt.

MUI ist die Adresse für datenlastige Screens. Die Kernbibliothek Material UI ist MIT und kostenlos; Data Grid, Date Range Picker, Charts und Tree View von MUI X haben erweiterte Features in bezahlten Plänen, im Oktober 2026 gelistet mit $299 (Pro) und $599 (Premium) pro Entwickler und Jahr. Der Standard-Look ist Material Design, je nach Produkt ein Feature oder ein Problem. Willst du weg davon, gruppiert der Guide zu MUI-Alternativen die Ersatzkandidaten nach Modell. Schwankst du zwischen den beiden häufigsten Kandidaten, behandelt unser Vergleich shadcn vs MUI Theming, Next.js-Eignung, Data Grids und Lizenzen.

Chakra UI 3 wurde auf Ark UI neu gebaut und hat seine Style Props behalten. Die responsive Objektsyntax reicht bis in die Props der Komponenten: Die Doku zum Drawer zeigt placement={{ mdDown: "bottom", md: "end" }}, was auf Smartphones einen Drawer von unten und ab md ein Seitenpanel öffnet. Dazu verkauft Chakra UI Pro Blocks, ab $299 einmalig.

HeroUI 3 ist das npm-Paket, das dem shadcn-Stack am nächsten kommt: React Aria Components darunter, Tailwind CSS v4 zum Stylen, MIT. Das Placement des Modals ist standardmäßig auto, es sitzt also unterhalb des Breakpoints sm am unteren Bildschirmrand und darüber mittig, und die Button-Styles (opens in a new tab) machen die Standardgröße auf Smartphones 40px hoch und ab md 36px. Eine eigene Bibliothek, HeroUI Native, deckt React Native ab, und ein kostenpflichtiges HeroUI Pro ergänzt Komponenten wie eine Command Palette und ein Data Grid.

Ant Design 6 ist für Enterprise-Backoffices gebaut: dichte Tabellen, Formulare und Admin-Layouts. Smartphones bekommen eine eigene Bibliothek, antd-mobile. Eine App, die beides bedient, pflegt also zwei Komponentensätze.

Solltest du stattdessen Headless Primitives nehmen?

Nur wenn du dein eigenes Design System baust und jeden Style, jeden Zustand und jede Animation selbst verantworten kannst. Headless-Bibliotheken liefern Verhalten und Barrierefreiheit; alles, was du siehst, ist dein Code.

• Base UI erschien am 11. Dezember 2025 in v1.0.0 (opens in a new tab) und ist jetzt die Standardbasis unter shadcn/ui. Sein Drawer übernimmt das Wischen zum Schließen, also das, wofür shadcn/ui Vaul genutzt hat.
• React Aria Components von Adobe hat die gründlichste Interaktionsschicht, die wir kennen. usePress behandelt Maus, Touch, Tastatur und Screenreader über eine API, und useHover ignoriert die emulierten Maus-Events, die Touch-Geräte auslösen (opens in a new tab). Genau die sind schuld an Hover-Styles, die nach einem Tippen hängen bleiben.
• Radix Primitives wird weiter gepflegt und liegt weiter unter dem größten Teil des shadcn-Ökosystems, Wingo UI eingeschlossen.

Mit einer Headless-Bibliothek wählst du auch die Basis für alles, was du später ergänzt, denn eine für eine Basis gebaute Registry passt nicht unbedingt sauber auf eine andere.

Welche shadcn Alternativen funktionieren auf dem Smartphone am besten?

Die meisten überlassen dir das Smartphone. Sie geben dir einen Drawer und einen Media-Query-Hook, und du verdrahtest den Wechsel von Popover oder Dialog zum Sheet Komponente für Komponente. Sortiert danach, wie viel dieser Arbeit die Bibliothek übernimmt, von wenig bis viel:

1. Nur responsives CSS. Magic UI und Aceternity UI (Effekte für Landing Pages) sowie Ant Design (eine eigene Mobile-Bibliothek).
2. Ein Rezept, das du pro Komponente kopierst. shadcn/ui, MUI und Mantine dokumentieren ein Muster, das eine Media Query liest und eine andere Komponente oder eine Vollbild-Variante rendert.
3. Ein Placement, das sich je nach Breakpoint ändert. Das Drawer-Placement von Chakra UI, modal-bottom sm:modal-middle von daisyUI und das Placement auto von HeroUI verschieben das Panel auf Smartphones an den unteren Rand. Ob du es wegziehen kannst, hängt von der Komponente ab.
4. In jede Komponente eingebaut. Konsta UI für reine Mobile-Apps mit iOS- oder Material-Look, und Wingo UI, wo Popover, Select, Dropdown Menu, Dialog und die Date Picker unter 768px als ziehbare Bottom Sheets aufgehen, über eine Prop responsive, die standardmäßig true ist.

Stufe 2 sieht so aus. Es ist eine gekürzte Kopie des responsiven Beispiels aus der Drawer-Doku von shadcn/ui, in dem das Formular in einer eigenen, gemeinsam genutzten Komponente steckt und die Overlay-Hülle zweimal dasteht:

const isDesktop = useMediaQuery("(min-width: 768px)");

if (isDesktop) {
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      {/* Trigger, Header und <ProfileForm /> */}
    </Dialog>
  );
}

return (
  <Drawer open={open} onOpenChange={setOpen}>
    {/* derselbe Trigger und Header noch einmal, dann <ProfileForm /> */}
  </Drawer>
);

Für einen Dialog ist das in Ordnung. Zum Projekt wird es, wenn jedes Popover, jedes Select, jedes Dropdown und jeder Date Picker dieselbe Behandlung braucht, jedes mit doppelt geschriebener Hülle und jedes mit einem Hook, der auf dem Server false liefert. Unser Guide zu Mobile-first-React-Komponenten erklärt, warum dieser Hook-Wert für Overlays harmlos und für Inhalte schädlich ist, zusammen mit den anderen Regeln für Smartphones.

Die Version auf Stufe 4 ist dieselbe Idee in einer Komponente. Der kostenlose Drawer ist auf Smartphones ein ziehbares Bottom Sheet, und seine Prop desktop entscheidet, was er ab 768px wird: dasselbe Sheet ("sheet", der Default), ein Seitenpanel ("side") oder ein zentrierter Dialog ("dialog").

"use client";

import { SlidersHorizontal } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Drawer, DrawerClose } from "@/components/ui/drawer";

export function ListingFilters({ results }: { results: number }) {
  return (
    <Drawer
      trigger={
        <Button variant="soft" leftIcon={<SlidersHorizontal />}>
          Filter
        </Button>
      }
      title="Filter"
      description="New York · 1.240 Angebote"
      desktop="dialog"
      closeLabel="Filter schließen"
      footer={
        <DrawerClose asChild>
          <Button size="lg" fullWidth>
            {results} Ergebnisse anzeigen
          </Button>
        </DrawerClose>
      }
    >
      <p className="text-sm text-muted-foreground">Preis, Zustand und Kategorien</p>
    </Drawer>
  );
}

Auf dem Smartphone hat das Sheet einen Ziehgriff und keinen Schließen-Button; im Desktop-Dialog erscheint ein Schließen-Button in der Ecke, und closeLabel ist sein zugänglicher Name.

Touch-Ziele folgen derselben Aufteilung. HeroUI v3 macht seine Buttons unterhalb von md höher, wie oben erwähnt. Der Button von Wingo UI wächst in der mittleren Größe bei groben Zeigern (Touch) von 40px auf 44px und gibt der kleinen Größe eine 44px-Trefferfläche, ohne ihr Aussehen zu ändern. Nur für die Smartphone-Frage prüft unser Vergleich beste React-Komponentenbibliothek für Mobile neun Bibliotheken bei 390px, Ionic React und antd-mobile eingeschlossen, auf Sheets, Touch-Ziele, Safe Areas und Gesten.

Welche shadcn Alternativen funktionieren am besten mit Coding-Agenten?

Im Oktober 2026 haben die meisten einen MCP-Server, die nützliche Frage ist also, was der Server kann. Wir sehen drei Arten:

• Doku-Server beantworten Fragen zu Komponenten, Props und Beispielen, und npm installiert weiter das Paket. MUI, Mantine (search_docs, get_item_props, get_api), Chakra UI (list_components, get_component_props, get_theme), Ant Design (acht Tools hinter antd mcp, darunter antd_changelog), React Aria und HeroUI arbeiten so.
• Install-Server finden Einträge und legen deren Code in dein Projekt. Der MCP-Server von shadcn macht das über die shadcn CLI für jede Registry in components.json, und der Server von Untitled UI kann seine Komponenten durchsuchen und installieren. Der von Magic UI gibt dem Agenten direkten Zugriff auf seine Komponenten.
• Server, die auch auf Updates prüfen. Unserer beantwortet Suchanfragen und liefert ohne Account Props mit Defaults, die Designregeln und die Theme-Tokens; den Code gibt er nur gegen einen API-Key heraus (ein kostenloser Account für kostenlose Einträge, Pro für den Rest). Sein Tool check_updates vergleicht die Versionen in deiner wingo-ui.json mit dem neuesten Release, damit der Agent von Fixes erfährt, bevor er eine Datei bearbeitet, für die schon ein Fix bereitliegt.

Die Einrichtung kostet jeweils eine Zeile:

# Doku-Server: Der Agent liest Props und Beispiele, npm installiert das Paket
claude mcp add mantine -- npx -y @mantine/mcp-server
claude mcp add chakra-ui -- npx -y @chakra-ui/react-mcp

# ein Install-Server für jede Registry in components.json
npx shadcn@latest mcp init --client claude

# der MCP-Server von Wingo UI plus eine Regeldatei für den Agenten
npx wingo-ui@latest agents install claude

Bei Bibliotheken, deren Code dir gehört, zählt der Server mehr. Bei einem Paket bekommt ein Agent, der eine Prop rät, einen Typfehler. Bei kopiertem Code kann der Agent die Komponente selbst bearbeiten, er braucht also die echte API und die Regeln dahinter. Unser Guide zu MCP-Servern für Komponentenbibliotheken behandelt die Tools, die Regeldatei und die Einrichtung für Claude Code, Cursor und Codex. Wählst du zwischen einem gehosteten Generator und einem Agenten in deinem Repository, wägt unser Vergleich v0 vs Claude Code Code-Besitz, Design-Konsistenz und Kosten anhand von Anmelde-, Preis- und Einstellungsseiten ab.

Wie aktualisierst du kopierte Komponenten?

Bei einem Paket führst du npm update aus und liest das Changelog. Bei kopiertem Code ist der Merge deine Sache, und die Bibliotheken helfen unterschiedlich viel.

Die shadcn CLI kann eine Vorschau zeigen: npx shadcn@latest add dialog --dry-run listet, was sich ändern würde, und --diff zeigt den Unterschied für eine Datei. Einen Fix von upstream in eine Datei zu bringen, die du bearbeitet hast, ist dann ein manueller Merge oder eine Aufgabe für deinen Agenten mit geladenem shadcn-Skill. Jede Registry, die du über die shadcn CLI installierst, verhält sich genauso. Unser Guide zum Aktualisieren von shadcn-Komponenten, ohne Änderungen zu verlieren, macht aus diesem manuellen Merge einen 3-Way-Merge mit git.

Die CLI von Wingo UI hält die Version von allem, was sie installiert, in wingo-ui.json fest und legt die installierte Kopie in .wingo-ui/base/ ab. Damit kann sie einen 3-Way-Merge ausführen, dieselbe Idee wie git merge:

npx wingo-ui@latest outdated              # installiert vs. neueste Version, und welche Dateien du bearbeitet hast
npx wingo-ui@latest diff drawer --base    # was du seit der Installation geändert hast
npx wingo-ui@latest update drawer         # unberührte Dateien werden ersetzt, deine Änderungen bleiben

Haben upstream und du dieselben Zeilen geändert, bekommt die Datei Konfliktmarker und du entscheidest, oder du löst jeden Konflikt mit --theirs oder --ours. Die Doku zu Updates erklärt die Details. Eine Einschränkung: Dateien, die du über die shadcn CLI aus unserer Registry installierst, haben keinen Versionseintrag, also kann wingo-ui update später nicht in sie mergen.

Welche shadcn Alternativen haben eine Data Table?

MUI, Ant Design und Wingo UI liefern eine vollständige Data Table; shadcn/ui gibt dir stattdessen einen Guide. Die Seite zur Data Table (opens in a new tab) erklärt, dass eine einzige Data-Table-Komponente die Flexibilität von Headless UI verlieren würde, und führt dich deshalb durch den Bau einer eigenen auf der Table-Komponente und TanStack Table v9. Das passt gut, wenn deine Tabellen alle verschieden sind. Brauchst du dieselbe Admin-Tabelle auf zwanzig Screens, wird der Guide zu Code, den du pflegst. Unser Tutorial zur Data Table mit TanStack Table v9 baut diesen Code mit Filtern, Sammelaktionen und Server-Paginierung und vergleicht ihn mit den fertigen Tabellen.

Die Alternativen lassen sich in drei Gruppen teilen. Das X Data Grid von MUI hat eine kostenlose MIT-Version und bringt seine erweiterten Features in den bezahlten Plänen. Die Table von Ant Design hat Sortieren, Filter und Paginierung eingebaut, und die anderen Pakete geben dir eine gestylte Tabelle zum Weiterbauen. Die Data Table von Wingo UI ist eine Pro-Komponente auf TanStack Table v9 mit Suche, Filtern, Sortieren, Sammelaktionen, Pinning, Resizing und Virtualisierung, und unter 768px wird jede Zeile zu einer Karte statt zu einer Tabelle, die seitlich scrollt:

"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: { Bezahlt: { tone: "success" }, Erstattet: { tone: "warning" }, Fehlgeschlagen: { 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"
      mobileLayout="cards"
    />
  );
}

Der Schlüssel mobile an einer Spalte entscheidet, wo ihr Wert auf der Smartphone-Karte landet: "title", "subtitle", "meta", "field" oder "hidden". Zeilen brauchen eine eindeutige id (oder du übergibst getRowId), weil die Auswahl sie nutzt. Stell mobileLayout auf "scroll", wenn eine Tabelle eine Tabelle bleiben muss.

Welche shadcn UI Alternative für React passt zu deinem Projekt?

Wähl die Bibliothek nach der Aufgabe. Das sind unsere Empfehlungen, auch für die vielen Fälle, in denen die Antwort nicht Wingo UI heißt:

• Enterprise-Admin mit großen Grids und Datumsbereichen: MUI mit MUI X, das umfangreichste Angebot an Datenkomponenten in dieser Liste.
• Interne Tools mit komplexen Formularen, ohne Tailwind: Mantine. Kostenlos, MIT, mit eingebauten Formularen und Datumsfeldern.
• Ein eigenes Design System: Base UI oder React Aria Components. React Aria, wenn Touch- und Screenreader-Verhalten exakt stimmen müssen.
• Eine kostenlose shadcn Alternative auf der neuen Standardbasis: coss ui.
• Ein npm-Paket mit shadcn-Look und -Stack: HeroUI 3.
• Animierte Marketingseiten: Magic UI oder Aceternity UI, neben dem, was du für die App nutzt.
• Server-gerenderte Seiten mit wenig JavaScript oder ein Stack jenseits von React: daisyUI.
• Eine reine Mobile-Web-App oder eine in Capacitor verpackte, mit nativem iOS- oder Material-Look: Konsta UI.
• Ein Produkt, das Leute auf Smartphone und Desktop nutzen, gebaut mit Coding-Agenten, bei dem dir der Code gehört und du trotzdem Updates willst: Wingo UI.

Wann solltest du bei shadcn/ui bleiben?

Bleib, wenn deine App vor allem auf Desktops genutzt wird, dein Team gern eigene responsive Wrapper schreibt und dir das größte Ökosystem wichtiger ist als jedes einzelne Feature. shadcn/ui ist kostenlos und MIT-lizenziert, sein GitHub-Repository (opens in a new tab) hatte am 8. Oktober 2026 etwa 125.000 Sterne, es unterstützt drei Basen, und seine CLI installiert aus einem ganzen Verzeichnis von Community Registries. Ein Wechsel hat seinen Preis: Jede Aufrufstelle, die die API einer Komponente nutzt, ändert sich, und eine neue Bibliothek bringt eigene Konventionen für Tokens, Größen und Zustände mit.

Du musst dich auch gar nicht entscheiden. Weil sich die Registries eine CLI teilen, ist der realistische Weg für die meisten Teams shadcn/ui als Basis plus ein oder zwei Registries für das, was fehlt.

Wie wechselst du, ohne alles neu zu schreiben?

Ersetz eine Komponente nach der anderen, fang mit denen an, die am meisten wehtun, und behalt beide Bibliotheken im Projekt, solange du das tust.

Drei praktische Punkte für einen Wechsel von shadcn/ui zu Wingo UI, die meisten gelten für jede Registry:

1. Dateinamen kollidieren. Beide Bibliotheken schreiben components/ui/button.tsx, dialog.tsx und drawer.tsx. Unsere CLI behält eine vorhandene Datei, die abweicht, und sagt dir, dass du den Befehl mit --overwrite erneut ausführen sollst. Committe also vorher und tausch bewusst.
2. Aufrufstellen ändern sich. Der Button von shadcn/ui nutzt variant="destructive" und variant="secondary"; unserer trennt Rolle und Farbe, daraus werden also tone="danger" und variant="soft".
3. Nimm in einem Base-UI-Projekt die richtige CLI. Kostenlose Einträge installierst du über ihre URL mit npx shadcn@latest add https://wingo-ui.com/r/button.json, Pro-Einträge über die Registry @wingo-ui in components.json. Aber shadcn-Projekte mit einem Base-UI-Style schreiben asChild um, worauf unsere Komponenten angewiesen sind. Nutz in diesen Projekten also npx wingo-ui@latest add, wie die Installationsdoku erklärt.

Damit die neuen Komponenten während der Migration nah an deinem aktuellen Look bleiben, setz einmal app-weite Defaults, statt überall Props zu übergeben. Unser Button und unser Input haben standardmäßig radius="md", was der mittleren Größe 10px-Ecken gibt; nutzen deine aktuellen Controls 8px, passt "sm" dazu:

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

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

UIProvider ist eine Client-Komponente, das Root-Layout kann also eine Server-Komponente bleiben. Explizite Props haben weiter Vorrang vor diesen Defaults, und die Defaults vor denen der Komponente. Der Button unten nutzt die Variante soft und den Radius full, beide über Props gesetzt, damit du ihn in beiden Themes mit deinen aktuellen Buttons vergleichen kannst.

Welche Vergleiche gehen tiefer?

Jeder dieser Beiträge unter Vergleiche und Alternativen schaut sich ein Paar oder eine Aufgabe genauer an:

• Wingo UI vs shadcn/ui: dasselbe Modell mit kopiertem Code, mit anderem Umfang, Preis und Lizenz.
• shadcn vs MUI: eigener Tailwind-Code gegen Material Design als Paket mit den Datenkomponenten von MUI X.
• Mantine vs shadcn: eine kostenlose npm-Familie mit Formularen, Datumsfeldern und Hooks gegen Code, den du mit Tailwind stylst.
• Chakra UI vs shadcn: Style Props und ein typisiertes Theme auf Emotion gegen Tailwind-Klassen in deinem Repo.
• MUI-Alternativen: was du wählst, je nachdem, wofür du MUI verlässt.
• Magic-UI-Alternativen: fünf animierte React-Bibliotheken im Vergleich, inklusive ihres Umgangs mit Reduced Motion.
• Tailwind-Plus-Alternativen: kostenlose und kostenpflichtige Optionen, seit Tailwind Plus für Neukunden geschlossen ist.
• shadcn Blocks vs Komponenten: wann du einen Screen mit einem Block oder einer Vorlage beginnst und wann mit einzelnen Komponenten.
• Beste React-Komponentenbibliothek für Dashboards: ausgewählt nach der Data Table, die jede Bibliothek liefert.
• Beste React-Komponentenbibliothek für Mobile: neun Bibliotheken im Vergleich beim Smartphone-Verhalten, das eine Web-App braucht.
• React Native vs PWA: wann eine React-Web-App reicht und wann du einen Build für den App Store brauchst.
• Sonner-Alternativen: vier React-Toast-Bibliotheken im Vergleich, und wann du bei Sonner bleibst.
• v0 vs Claude Code für UI: eine gehostete Sandbox mit Vorschau von Screens gegen einen Agenten, der in deinem eigenen Repository arbeitet.

Wo solltest du anfangen?

Nimm die eine Komponente, die auf dem Smartphone am meisten wehtut, und probier nur für sie eine Alternative aus. Ist es ein Overlay, installier den kostenlosen Drawer mit npx wingo-ui@latest add drawer (kein Account nötig; er bringt den Button und den Media-Query-Hook mit), setz ihn hinter einen Trigger, den Leute auf dem Smartphone nutzen, und öffne ihn auf deinem eigenen Gerät. Die Data Table und der Rest des Katalogs gehören zu Wingo UI Pro, und der MCP-Server beantwortet Fragen zu jedem Eintrag ohne Account, damit dein Agent die Props lesen kann, bevor du dich entscheidest.

Häufige Fragen

Was ist die beste kostenlose Alternative zu shadcn/ui?

Soll dir der Code weiter gehören, kommt coss ui am nächsten: MIT-lizenziert, auf Base UI gebaut und über die shadcn CLI installiert. Installierst du lieber ein Paket, ist Mantine MIT-lizenziert, kostenlos und deckt neben den Grundkomponenten auch Formulare, Datumsfelder und Charts ab.

Baut shadcn/ui noch auf Radix auf?

Nicht mehr standardmäßig. Seit Juli 2026 startet npx shadcn init neue Projekte auf Base UI, Radix wird mit dem Flag -b radix weiter voll unterstützt, und React Aria steht mit --base aria als dritte Basis zur Wahl.

Welche shadcn Alternative funktioniert auf dem Smartphone am besten?

Konsta UI, wenn du für eine reine Mobile-Web-App einen iOS- oder Material-Look willst, und Wingo UI, wenn dieselbe App auf Desktop und Smartphone läuft, weil Popover, Select, Menüs und Dialog dort unter 768px standardmäßig als ziehbare Bottom Sheets aufgehen. HeroUI, Chakra UI und daisyUI können ein Modal oder einen Drawer auf Smartphones an den unteren Rand verschieben; shadcn/ui, MUI und Mantine dokumentieren ein Rezept, das du pro Komponente verdrahtest.

Kann ich eine shadcn Alternative neben shadcn/ui nutzen?

Ja. Registries wie coss ui, Magic UI, Aceternity UI und Wingo UI installierst du mit demselben Befehl shadcn add, du kannst also eine Komponente nach der anderen ersetzen. Achte auf Dateien mit gleichem Namen wie components/ui/button.tsx und committe vor jedem Tausch.

Funktionieren shadcn Alternativen mit Claude Code und Cursor?

Die meisten ja. Stand Oktober 2026 veröffentlichen shadcn/ui, MUI, Mantine, Chakra UI, HeroUI, Ant Design, React Aria, Magic UI, Untitled UI und Wingo UI MCP-Server, und fast alle bieten llms.txt an. Die Server unterscheiden sich: Manche beantworten Fragen zur Doku, manche installieren Quelldateien, und der von Wingo UI prüft außerdem deine installierten Versionen auf Updates.