# 14 shadcn Alternativen 2026: Preis, Mobile und MCP
> 14 shadcn Alternativen im Oktober 2026 geprüft: freie und kostenpflichtige UI-Bibliotheken nach Lizenz, Preis, Mobile und MCP, mit einer Wahl pro Einsatz.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 9. Okt. 2026
- Kategorie: [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons)
- Lesezeit: 20 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/shadcn-alternatives
- Englische Fassung: https://wingo-ui.com/blog/shadcn-alternatives
## Kurz gesagt
Welche shadcn Alternative am besten passt, hängt davon ab, welchen Teil von shadcn/ui du ersetzen willst. Soll dir der Code weiter gehören, nimm coss ui (kostenlos, auf Base UI), Magic UI oder Aceternity UI für animierte Marketingseiten oder Wingo UI für Mobile-first-Komponenten in Apps; willst du lieber ein Paket installieren, nimm Mantine, MUI, Chakra UI oder HeroUI; für ein eigenes Design System starte mit Base UI oder React Aria. Die meisten dieser Bibliotheken überlassen dir das Smartphone-Layout, prüf also vor dem Wechsel, was jede auf einem 390px-Bildschirm macht.
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](https://wingo-ui.com/de/blog/category/comparisons).
## 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](https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default) 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](https://ui.shadcn.com/docs/changelog/2026-07-react-aria) (`--base aria`).
Weitere Änderungen, die beim Vergleichen zählen:
- Der [Drawer](https://ui.shadcn.com/docs/components/drawer) 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](https://ui.shadcn.com/docs/changelog/2026-09-cn), sodass Komponenten es aus `cn` statt aus `@/lib/utils` importieren. Was der neue Toast neben Sonner bedeutet, steht in unserem [Vergleich der Sonner-Alternativen](https://wingo-ui.com/de/blog/sonner-alternative-react-toast).
- Auf der Agenten-Seite gibt es einen [MCP-Server](https://ui.shadcn.com/docs/mcp), der jede Registry in `components.json` durchsucht und daraus installiert, und einen [Skill](https://ui.shadcn.com/docs/skills) (`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
| Bibliothek | Modell und Basis | Lizenz | Preis | Mobile | Agenten |
| --- | --- | --- | --- | --- | --- |
| [shadcn/ui](https://ui.shadcn.com/docs/changelog) | CLI kopiert den Code; Base UI (Standard), Radix oder React Aria | MIT | Kostenlos | Drawer, ein Rezept aus Dialog plus Drawer, Sidebar mit eigenem Mobile-Zustand | MCP-Server, Skill, llms.txt |
| [coss ui](https://coss.com/ui/llms.txt) | shadcn Registry (`@coss`); Base UI | MIT | Kostenlos | Drawer mit Wischen, Snap Points und Verschachtelung | llms.txt, Agent Skills |
| [Magic UI](https://pro.magicui.design) | shadcn Registry (`@magicui`); Motion | MIT (kostenlos), kostenpflichtige Lizenz (Pro) | Kostenlos; Pro $199 einmalig | Effekte für Landing Pages; kein Sheet, Popover oder Menü im Katalog | [MCP-Server](https://magicui.design/docs/mcp), llms.txt |
| [Aceternity UI](https://ui.aceternity.com/pricing) | shadcn Registry (`@aceternity`); Motion | [Aceternity License](https://ui.aceternity.com/licence) | Kostenlos; $169 im Jahr oder $199 lebenslang; Team $1,590 für 10 Personen | Effekte und Blocks; einige Blocks dokumentieren ein Mobile-Menü | llms.txt; Prompts für v0 und Lovable in den bezahlten Plänen |
| [Untitled UI React](https://www.untitledui.com/react) | Eigene CLI oder npm; React Aria, Tailwind CSS v4 | MIT (kostenlose Basis), PRO-Lizenz | Kostenlos; PRO ab $349 einmalig für eine Person | Drawer und Modals sind PRO | MCP-Server, llms.txt |
| [Wingo UI](https://wingo-ui.com/docs/installation) | Eigene CLI oder shadcn Registry (`@wingo-ui`); Radix, vaul, Motion | Lizenz pro Entwickler; 75 Einträge kostenlos | Kostenlos; Pro $8 im Monat, $80 im Jahr oder $150 lebenslang | Popover, Select, Menüs und Dialog gehen unter 768px als Bottom Sheets auf; 44px-Ziele bei Touch; Tabellenzeilen werden zu Karten | [MCP-Server](https://wingo-ui.com/docs/mcp), Regeln für 5 Agenten, llms.txt, Update-Checks |
### Pakete und Primitives
| Bibliothek | Modell und Basis | Lizenz | Preis | Mobile | Agenten |
| --- | --- | --- | --- | --- | --- |
| [Mantine 9](https://mantine.dev/guides/llms/) | npm; eigenes CSS, kein Tailwind | MIT | Kostenlos | Modal wird auf kleinen Bildschirmen mit `use-media-query` zum Vollbild (ein Rezept aus der Doku) | MCP-Server, Skills, llms.txt |
| [MUI (Material UI 9)](https://mui.com/pricing/) | npm; Emotion | MIT (Kern) | Kostenlos; MUI X Pro $299 oder Premium $599 pro Entwickler und Jahr | SwipeableDrawer; Dialog wird mit `useMediaQuery` zum Vollbild (ein Rezept aus der Doku) | [MCP-Server](https://mui.com/material-ui/getting-started/mcp/), llms.txt |
| [Chakra UI 3](https://www.chakra-ui.com/docs/get-started/ai/mcp-server) | npm; Ark UI, Emotion | MIT | Kostenlos; Blocks von [Chakra UI Pro](https://pro.chakra-ui.com/pricing) $299 einmalig | Das Placement des Drawers akzeptiert Breakpoints, etwa `bottom` auf Smartphones und `end` ab `md` | MCP-Server, llms.txt |
| [HeroUI 3](https://www.heroui.com/llms.txt) | npm; React Aria, Tailwind CSS v4 | MIT | Kostenlos; [HeroUI Pro](https://heroui.pro/pricing) wird separat verkauft | Modal mit Placement `auto` sitzt auf Mobile unten und auf Desktop mittig; eine eigene Bibliothek für React Native | MCP-Server, Agent Skills, llms.txt |
| [Ant Design 6](https://ant.design/docs/react/mcp) | npm; eigene Designsprache | MIT | Kostenlos | Für Enterprise-Backoffices gebaut; Smartphones bekommen eine eigene Bibliothek, antd-mobile | MCP-Server (`antd mcp`), llms.txt |
| [daisyUI 5](https://daisyui.com/components/modal/) | Plugin für Tailwind CSS, nur Klassennamen | MIT | Kostenlos; [Blueprint MCP](https://daisyui.com/blueprint/) $22 im Monat oder $600 lebenslang | `modal-bottom sm:modal-middle` setzt ein Modal auf Smartphones an den unteren Rand; Dock für die Navigation unten | llms.txt, Skill; Blueprint MCP (kostenpflichtig) |
| [Konsta UI 5](https://konstaui.com/) | npm für React, Vue und Svelte; Tailwind CSS | MIT | Kostenlos | Nur Mobile: Sheets, Tab Bars und Toolbars im iOS- und Material-Stil | Nichts gefunden |
| [Base UI 1.8](https://base-ui.com/llms.txt) | npm; ungestylt | MIT | Kostenlos | Drawer mit Wischen zum Schließen | llms.txt |
| [React Aria Components](https://react-aria.adobe.com/llms.txt) | npm; ungestylt | Apache-2.0 | Kostenlos | Press- und Hover-Events für Touch vereinheitlicht | MCP-Server, Agent Skills, llms.txt |
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](https://tailwindcss.com/blog/tailwind-plus), hat aber am 9. September 2026 [die Anmeldung für Neukunden geschlossen](https://tailwindcss.com/blog/tailwind-is-joining-shopify); unser [Guide zu Tailwind-Plus-Alternativen](https://wingo-ui.com/de/blog/tailwind-plus-alternatives) 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](https://github.com/cosscom/coss) 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](https://wingo-ui.com/de/blog/wingo-ui-vs-shadcn) 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](https://mantine.dev/guides/llms/) 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](https://wingo-ui.com/de/blog/mui-alternatives) die Ersatzkandidaten nach Modell. Schwankst du zwischen den beiden häufigsten Kandidaten, behandelt unser [Vergleich shadcn vs MUI](https://wingo-ui.com/de/blog/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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/button.css) 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](https://base-ui.com/llms.txt) 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](https://react-aria.adobe.com/useHover.md). 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](https://wingo-ui.com/components/popover), [Select](https://wingo-ui.com/components/select), Dropdown Menu, [Dialog](https://wingo-ui.com/components/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:
```tsx
const isDesktop = useMediaQuery("(min-width: 768px)");
if (isDesktop) {
return (
);
}
return (
{/* derselbe Trigger und Header noch einmal, dann */}
);
```
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](https://wingo-ui.com/de/blog/mobile-first-react-components) 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](https://wingo-ui.com/components/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"`).
```tsx
"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 (
}>
Filter
}
title="Filter"
description="New York · 1.240 Angebote"
desktop="dialog"
closeLabel="Filter schließen"
footer={
}
>
Preis, Zustand und Kategorien
);
}
```
> Live-Demo (Drawer): Tippe auf „Filters“: Auf dem Smartphone gleitet das Sheet nach oben und lässt sich zum Schließen nach unten ziehen; auf einem breiten Bildschirm öffnet dieselbe Komponente einen zentrierten Dialog. Probier sie unter [Drawer](https://wingo-ui.com/components/drawer) aus und installier sie mit `npx wingo-ui@latest add 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](https://wingo-ui.com/components/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](https://wingo-ui.com/de/blog/best-react-component-library-for-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:
```bash
# 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](https://wingo-ui.com/de/blog/component-library-mcp-guide) 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](https://wingo-ui.com/de/blog/v0-vs-claude-code-for-ui) 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](https://wingo-ui.com/de/blog/update-shadcn-components-without-losing-edits), 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`:
```bash
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](https://wingo-ui.com/docs/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](https://ui.shadcn.com/docs/components/data-table) 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](https://wingo-ui.com/de/blog/tanstack-table-v9-data-table) 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](https://wingo-ui.com/components/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:
```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: { 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 (
);
}
```
> Live-Demo (Data Table): Such nach einem Kunden, schalte den Chip „Overdue“ um und sortiere oder filtere dann über die Toolbar; auf dem Smartphone wird jede Zeile zu einer Karte mit dem Button „Load more“. 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 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](https://github.com/shadcn-ui/ui) 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](https://wingo-ui.com/docs/installation) 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:
```tsx
import { UIProvider } from "@/lib/ui-config";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`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.
> Live-Demo (Button): Drück den Button: Er gibt mit einer schnellen Feder nach und federt zurück; geh mit Tab darauf, um den Fokusring zu sehen, und wechsle dann das Theme, um Hell und Dunkel zu vergleichen. Probier sie unter [Button](https://wingo-ui.com/components/button) aus und installier sie mit `npx wingo-ui@latest add button`.
## Welche Vergleiche gehen tiefer?
Jeder dieser Beiträge unter [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons) schaut sich ein Paar oder eine Aufgabe genauer an:
- [Wingo UI vs shadcn/ui](https://wingo-ui.com/de/blog/wingo-ui-vs-shadcn): dasselbe Modell mit kopiertem Code, mit anderem Umfang, Preis und Lizenz.
- [shadcn vs MUI](https://wingo-ui.com/de/blog/shadcn-vs-mui): eigener Tailwind-Code gegen Material Design als Paket mit den Datenkomponenten von MUI X.
- [Mantine vs shadcn](https://wingo-ui.com/de/blog/mantine-vs-shadcn): eine kostenlose npm-Familie mit Formularen, Datumsfeldern und Hooks gegen Code, den du mit Tailwind stylst.
- [Chakra UI vs shadcn](https://wingo-ui.com/de/blog/chakra-ui-vs-shadcn): Style Props und ein typisiertes Theme auf Emotion gegen Tailwind-Klassen in deinem Repo.
- [MUI-Alternativen](https://wingo-ui.com/de/blog/mui-alternatives): was du wählst, je nachdem, wofür du MUI verlässt.
- [Magic-UI-Alternativen](https://wingo-ui.com/de/blog/magic-ui-alternatives): fünf animierte React-Bibliotheken im Vergleich, inklusive ihres Umgangs mit Reduced Motion.
- [Tailwind-Plus-Alternativen](https://wingo-ui.com/de/blog/tailwind-plus-alternatives): kostenlose und kostenpflichtige Optionen, seit Tailwind Plus für Neukunden geschlossen ist.
- [shadcn Blocks vs Komponenten](https://wingo-ui.com/de/blog/shadcn-blocks-vs-components): wann du einen Screen mit einem Block oder einer Vorlage beginnst und wann mit einzelnen Komponenten.
- [Beste React-Komponentenbibliothek für Dashboards](https://wingo-ui.com/de/blog/best-react-component-library-for-dashboard): ausgewählt nach der Data Table, die jede Bibliothek liefert.
- [Beste React-Komponentenbibliothek für Mobile](https://wingo-ui.com/de/blog/best-react-component-library-for-mobile): neun Bibliotheken im Vergleich beim Smartphone-Verhalten, das eine Web-App braucht.
- [React Native vs PWA](https://wingo-ui.com/de/blog/react-native-vs-pwa): wann eine React-Web-App reicht und wann du einen Build für den App Store brauchst.
- [Sonner-Alternativen](https://wingo-ui.com/de/blog/sonner-alternative-react-toast): vier React-Toast-Bibliotheken im Vergleich, und wann du bei Sonner bleibst.
- [v0 vs Claude Code für UI](https://wingo-ui.com/de/blog/v0-vs-claude-code-for-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](https://wingo-ui.com/de/pricing), und der [MCP-Server](https://wingo-ui.com/docs/mcp) beantwortet Fragen zu jedem Eintrag ohne Account, damit dein Agent die Props lesen kann, bevor du dich entscheidest.
## 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`
- [Drawer](https://wingo-ui.com/components/drawer) (Free): A React drawer and bottom sheet built on vaul: drag to dismiss, snap points, nesting, and a side panel or dialog on desktop. Installation: `npx wingo-ui@latest add drawer`
- [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`
## 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.
---
Quelle: https://wingo-ui.com/de/blog/shadcn-alternatives