shadcn/ui: Code-Ownership-Architektur für React Component Libraries

Was ist shadcn/ui?  

shadcn/ui verändert die Arbeit von React-Entwicklern. Entwickler nutzen damit UI-Komponenten. UI-Komponenten sind Bausteine für die Benutzeroberfläche. Normale Bibliotheken müssen Sie installieren. shadcn/ui ist anders. shadcn/ui kopiert fertigen TypeScript-Code direkt in Ihr Projekt.

Das neue Konzept  

Der alte Weg:

npm install @mui/material @emotion/react @emotion/styled
# → Code liegt in node_modules, Updates laufen über npm, Breaking Changes sind möglich

Der Weg von shadcn/ui:

npx shadcn@latest add button
# → Code liegt in /components/ui/button.tsx, gehört Ihrem Projekt, volle Kontrolle

Warum dieser Weg gut funktioniert  

shadcn/ui verbindet drei gute Techniken miteinander. Das ergibt ein tolles System:

• Radix UI Primitives: Das bietet Funktionen für die Barrierefreiheit. Die Funktionen erfüllen den Standard WCAG 2.1 AA.
• Tailwind CSS: Das System verarbeitet das CSS beim Erstellen. Es verbraucht keine Leistung beim Ausführen.
• CLI-Tool: Dieses Programm kopiert den Code automatisch. Es verwaltet auch die Abhängigkeiten.

Messbare Vorteile  

Leistung:

• 12 KB Bundle-Size. Das ist die Dateigröße. Material-UI braucht 340 KB. Das sind 96 Prozent weniger.
• Build-Time CSS. Das System berechnet das Aussehen beim Erstellen. Es nutzt kein langsames JavaScript dafür.
• Das System packt nur den nötigen Code zusammen.

Vorteile für Entwickler:

• Volle Kontrolle über den Code. Sie können jede Zeile sehen. Sie können jede Zeile ändern.
• Keine erzwungenen Breaking Changes. Updates machen keine alten Sachen kaputt. Sie machen Updates nur freiwillig.
• TypeScript von Anfang an. Der Code hat sofort alle wichtigen Typen.

Nutzerzahlen (Oktober 2025):

• 98.500 Sterne auf GitHub in 2 Jahren (github.com/shadcn-ui/ui)
• 330.000 Installationen über die CLI pro Woche (npmjs.com)
• 35.780 fertige Internetseiten auf der ganzen Welt (BuiltWith)

Inhaltsverzeichnis  

Technische Vorteile: Darum nutzen Entwickler shadcn/ui  

1. Keine Gefahr durch Breaking Changes  

Das Problem bei alten Bibliotheken:

# Material-UI v4 → v5 Migration
npm update @mui/material
# → Mögliche Breaking Changes. Sie müssen den Code per Hand ändern.

Die Lösung von shadcn/ui:

# Code liegt in Ihrem Repository
/components/ui/button.tsx  # Ihr eigener Code
# → Ein Update über npm überschreibt den Code nicht.
# → Updates sind freiwillig. Niemand zwingt Sie dazu.

Genaue Vorteile:

• Keine Breaking Changes: Der Code gehört zu Ihrem Projekt.
• Volle Kontrolle: Sie planen jede Änderung ganz genau.
• Sicherer Betrieb: Es gibt keine überraschenden Updates der Bibliothek.

2. Bessere Bundle-Size  

Das Problem: Alte UI-Bibliotheken laden die ganze Bibliothek. Sie laden auch nicht genutzten Code. Das nennt man bundlen.

Die Lösung von shadcn/ui: Das System kopiert nur genutzte Komponenten. Es packt auch nur diese zusammen.

Messbare Unterschiede (Beispiel: Button und Dialog):

Wir haben die Bundle-Size mit dem Programm Webpack Bundle Analyzer gemessen. Das Beispiel enthält einen Button und einen Dialog. Der Test war im Oktober 2025. Die Liste ist nach Größe sortiert.

Die Zahlen im Vergleich:

shadcn/ui braucht 12 KB für Button und Dialog. Das sind 96 Prozent weniger als Material-UI. Material-UI braucht 340 KB. Diese große Einsparung hat zwei Gründe:

1. Nur der nötige Code: Sie laden nicht die ganze Bibliothek. Sie laden nur zwei Komponenten.
2. Build-Time CSS: Das System wandelt Tailwind CSS früh um. Es nutzt kein langsames JavaScript für das Aussehen.

Warum das wichtig ist: Eine langsame Internetverbindung am Handy lädt etwa 400 KB pro Sekunde. Der Unterschied ist hier 328 KB. Die Seite lädt damit fast eine Sekunde schneller. Das ist sehr wichtig für Online-Shops und Startseiten. Die Kunden kaufen bei schnellen Seiten mehr ein. Das nennt man Conversion-Rate.

npm install @mui/material @emotion/react @emotion/styled

Bekannte Beispiele  

Viele große Projekte nutzen shadcn/ui. Diese Projekte haben viele Besucher:

Echte Beispiele mit React:

Beispiele für Komponenten  

Marktdaten: Das Umfeld der React UI-Bibliotheken  

Vergleich der Downloads bei npm in einer Woche:

Material-UI hat zehnmal mehr Downloads. Aber shadcn/ui ist kein normales npm-Paket. Deshalb ist der Vergleich etwas schwer.

Aktivität auf GitHub (Oktober 2025):

Die Quelle ist GitHub. Der Stand ist Oktober 2025. shadcn/ui hat in 2 Jahren fast so viele Sterne wie 10 Jahre alte Projekte bekommen.

Die Technik dahinter  

1. Das Modell für den eigenen Code  

Die Basis: shadcn/ui nutzt das Prinzip Code Ownership. Das bedeutet eigenen Code. Der Code der Komponenten gehört zu Ihrem Projekt. Er gehört zu keiner fremden Bibliothek.

// Nach der Installation von shadcn/ui
/components/ui/
├── button.tsx          // Ihr eigener Code
├── dialog.tsx          // Ihr eigener Code
└── input.tsx           // Ihr eigener Code

// package.json - nur Abhängigkeiten, kein UI-Code
{
  "dependencies": {
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-slot": "^1.0.2"
  }
}

Vorteile:

• Volle Kontrolle: Sie können jede Zeile Code sehen. Sie können jede Zeile ändern.
• Keine Breaking Changes: Fremde Updates können Ihr Projekt nicht zerstören.
• Versionierung: Sie sehen alle Änderungen am Code in Ihrem Git-Repository.

2. Bessere Bundle-Size  

Das Problem: Alte UI-Bibliotheken laden die ganze Bibliothek. Sie laden auch nicht genutzten Code.

Die Lösung von shadcn/ui: Das System kopiert nur genutzte Komponenten. Es packt auch nur diese zusammen.

3. Die verwendeten Techniken  

shadcn/ui verbindet drei gute Techniken. Das ergibt ein tolles System:

4. CSS zur Build-Zeit  

Das System verarbeitet Tailwind CSS beim Erstellen. Das nennt man Build-Zeit. Material-UI und Chakra UI nutzen CSS-in-JS. Das braucht leider Leistung beim Ausführen. Das nennt man Runtime-Overhead.

5. Barrierefreiheit  

Radix UI Primitives erfüllen den Standard WCAG 2.1 AA. Die Komponenten von shadcn/ui bekommen diese Funktionen automatisch.

6. Breaking Changes  

Bei Material-UI Version 4 auf Version 5 gibt es viele Breaking Changes. Entwickler müssen den Code per Hand anpassen.

Bei shadcn/ui liegt der Code in Ihrem Repository. Updates sind freiwillig. Niemand zwingt Sie dazu.

Die Nachteile: Wo shadcn/ui nicht passt  

Der eigene Code hat auch messbare Nachteile. Für manche Firmen sind die Nachteile größer als die Vorteile.

Wichtige Grenzen:

Große Projekte brauchen mehr Pflege: Sie müssen jede Komponente einzeln pflegen. Bei sehr großen Projekten wird das schwer. Das gilt ab etwa 50 Komponenten.

Tailwind CSS ist Pflicht: Das ganze Aussehen funktioniert nur mit Tailwind. Teams mit anderen CSS-Systemen müssen wechseln.

Updates per Hand: Sicherheits-Updates in Radix UI passieren nicht von allein. Sie müssen diese Updates für jede betroffene Komponente per Hand einbauen.

Nur für React: Es gibt eine offizielle Unterstützung nur für React (ui.shadcn.com). Es gibt auch Versionen für Vue (shadcn-vue.com) und Svelte. Diese sind aber von anderen Entwicklern. Sie haben keine offizielle Unterstützung.

Der Vergleich mit anderen Systemen  

Die Wahl des richtigen Systems hängt von vielen Dingen ab. Diese Tabelle zeigt den Vergleich:

Entscheidungs-Hilfe für Firmen:

Das System für das Aussehen: CSS-Variablen statt JavaScript  

shadcn/ui nutzt nur CSS-Variablen für das Aussehen. Andere Systeme nutzen dafür JavaScript. Bei JavaScript braucht das Aussehen extra Leistung beim Ausführen. Bei shadcn/ui gibt es keinen solchen Leistungsverlust.

Der technische Einbau  

CSS-Variablen beim Erstellen:

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: 173 80% 40%;
  --primary-foreground: 0 0% 98%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --radius: 0.5rem;
}

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 173 80% 40%;
  --primary-foreground: 0 0% 9%;
}

Tailwind-Klassen konsumieren die Variablen:

// Button-Komponente
<button className="bg-primary text-primary-foreground">
Click me
</button>
// → Wird beim Erstellen zu: background-color: hsl(var(--primary))

Vergleich der Leistung  

shadcn/ui (CSS beim Erstellen):

• Das System verarbeitet CSS beim Erstellen der Seite.
• Es braucht keine extra Leistung durch JavaScript beim Ausführen.
• Die Ausgabe ist festes CSS.

Material-UI und Chakra UI (CSS-in-JS):

• Das System erstellt CSS erst beim Ausführen der Seite.
• JavaScript braucht extra Leistung für das Aussehen.
• Das System fügt CSS laufend in die Seite ein.

Messbare Folgen: Bei mehr als 1000 Komponenten kann CSS-in-JS zu langsam werden. Das merken auch die Nutzer.

Das Vercel-Umfeld: Die strategische Lage  

shadcn/ui ist kein ganz freies Projekt. Der Erfinder nennt sich "shadcn". Er arbeitet als Design Engineer bei der Firma Vercel. Diese Verbindung ist Absicht:

Fakten:

• Der Erfinder shadcn ist Design Engineer bei Vercel.
• Das KI-Programm v0.dev von Vercel schreibt Code für shadcn/ui.
• Die Vercel Academy bietet Kurse für Next.js und React an.
• Es arbeitet sehr gut mit dem Next.js App Router zusammen.

Das Umfeld der Community  

Wichtige Erweiterungen von anderen Entwicklern:

Einsatz in großen Firmen: shadcn/ui mit TYPO3  

Der Einbau von React-Komponenten in TYPO3 erfordert eine Headless-Architektur. Das bedeutet ein getrenntes System.

Der Einbau: Headless CMS und React-Frontend  

Aufbau vom System:

1. TYPO3 verwaltet die Inhalte im Backend. Es liefert Daten über eine JSON-API.
2. Das Frontend nutzt Next.js und shadcn/ui für die Anzeige.
3. Das System schickt fertige Dateien zurück an TYPO3 für die Verteilung.

Das brauchen Sie für die Technik:

• Die TYPO3-Erweiterung friendsoftypo3/headless. Sie brauchen Version 4.0 oder neuer für die JSON-API.
• Ein Frontend mit Next.js ab Version 15 und React Server Components.
• Die Komponenten von shadcn/ui fügen Sie über die CLI hinzu.
• Einen eigenen Server für das Frontend. Zum Beispiel Vercel, AWS oder Azure. Oder einen Export der Daten zurück in TYPO3.

Verbreitung im Markt  

Wir kennen 35.780 fertige Projekte mit shadcn/ui. Die Verteilung zeigt klare Muster:

Es gibt 35.780 bekannte fertige Projekte (BuiltWith, Oktober 2025). Davon sind 16.026 aus den USA. Das sind 44,8 Prozent.

Entwicklung und Planung  

shadcn/ui hat sich in den letzten zwei Jahren immer weiter verbessert. Ein Blick auf die neuen Versionen zeigt große Fortschritte:

Fazit: Die Kosten und der Nutzen  

Die Wahl von shadcn/ui bringt Ihnen mehr Kontrolle. Das hat messbare Kosten und Vorteile.

Hilfe für die Entscheidung  

Beste Einsatzgebiete  

Dashboards für SaaS und Admin-Seiten

• Laufzeit vom Projekt: Projekte ab 5 Jahren profitieren sehr vom eigenen Code.
• Anpassungen: Sie können Dinge oft ändern. Es gibt keine Grenzen durch ein Framework.
• Beispiele: Daten-Tabellen, Diagramme, Formulare und Dialoge.
• Gewinn: Sie sparen bei langen Projekten viel Geld für die Pflege.

Seiten mit sehr vielen Inhalten

• Leistung: Sie laden nur wenig JavaScript. Das CSS wird schon beim Erstellen berechnet.
• Ladezeit: Die Seite lädt schneller wegen der kleinen Dateigröße. Das verbessert die Core Web Vitals.
• Beispiele: Blogs, Seiten für Anleitungen und Startseiten.
• Gewinn: Sie können die bessere Leistung direkt messen.

Basis für eigene Design-Systeme

• Anpassung: Es ist ein guter Start für eigene Sammlungen von Komponenten.
• Kontrolle: Sie können alles anpassen. Der Code liegt in Ihrem Repository.
• Beispiel: Das Projekt taxonomy zeigt gute Muster dafür.
• Gewinn: Sie bekommen einheitliche Komponenten. Sie können diese immer wieder nutzen.

Wo shadcn/ui nicht passt  

Sehr kurze Projekte (unter 3 Monate)

• Zeit für den Start: Das Lernen von Tailwind kostet Zeit.
• Alternativen: Material-UI und Chakra UI sind schneller startklar.
• Gewinn: Der Start kostet hier mehr als er bringt.

Sehr große Teams (über 50 Frontend-Entwickler)

• Verwaltung: Die Verwaltung der Komponenten wird sehr schwer.
• Alternative: Zentrale Updates bei Bibliotheken wie Material-UI passen hier besser.
• Gewinn: Die viele Absprache im Team frisst die Vorteile auf.

Projekte mit mehreren Frameworks

• Grenze: shadcn/ui funktioniert offiziell nur mit React (Quelle: ui.shadcn.com).
• Andere Versionen: Es gibt inoffizielle Versionen wie shadcn-vue.com und shadcn-svelte.com.
• Alternative: Andere Bibliotheken unterstützen mehrere Frameworks besser.

Zusammenfassung: Es lohnt sich für die richtige Zielgruppe  

shadcn/ui löst ein bestimmtes Problem für eine bestimmte Zielgruppe. Es gibt jede Woche 330.000 Downloads. Diese Gruppe ist also sehr groß und wichtig.

Geprüfte Zahlen mit Quellen:

Nachteile im Aufbau:

• Tailwind CSS ist Pflicht: Das Team muss Tailwind lernen und nutzen.
• Pflege per Hand: Sie müssen jede Komponente einzeln pflegen.
• Fokus auf React: Vue und Angular gibt es nur inoffiziell über die Community.

Hilfe und weitere Links  

Haben Sie Fragen zum Einbau in Ihre Projekte?
office@webconsulting.at