shadcn/ui ist eine Sammlung von Komponenten für React, die der Entwickler mit dem Namen shadcn 2023 veröffentlicht hat. Die Bausteine werden direkt ins eigene Projekt kopiert und gehören danach dem Projekt, statt als Paket von außen zu kommen.
- shadcn/ui
Eine Sammlung von React-Komponenten auf Basis von Radix UI und Tailwind CSS, deren Quellcode ins eigene Projekt übernommen wird.
Beispiel: „Den Datumswähler haben wir aus shadcn/ui übernommen und danach an unsere Farben angepasst.“Abgrenzung zur Component Library: Eine Bibliothek wird installiert und mit Updates versorgt. Bei shadcn/ui liegt der Code nach dem Kopieren in deinem Projekt, und du änderst ihn wie eigenen Code.
Wie shadcn/ui funktioniert
Über eine Kommandozeile. Ein Befehl wie npx shadcn add button legt die Datei für den Button im Projekt an. Die Komponente nutzt im Inneren Radix UI für Verhalten und Barrierefreiheit und Tailwind CSS für die Gestaltung.
Weil der Code offen vor dir liegt, kannst du jede Kleinigkeit ändern, ohne gegen eine Bibliothek anzuarbeiten. Der Preis: Verbesserungen am Original kommen nicht automatisch an, du übernimmst sie bei Bedarf selbst.
Warum shadcn/ui so verbreitet ist
Es passt zu der Art, wie viele React-Projekte heute gebaut werden, mit Next.js und Tailwind CSS. Dazu kommt die KI: Werkzeuge wie v0 von Vercel erzeugen Oberflächen bevorzugt mit shadcn/ui, und Sprachmodelle kennen die Komponenten aus unzähligen Beispielen.
Viele Anwendungen sehen deshalb ähnlich aus, mit denselben Karten und Dialogen. Wer eine eigene Marke zeigen will, passt die Farben und Rundungen im Theme an.
Wann shadcn/ui passt
Für React-Projekte, die ohnehin Tailwind CSS nutzen und die volle Kontrolle über ihre Bausteine wollen. In Projekten ohne React hilft es nicht weiter.