Acht shadcn/ui-Blöcke, gebaut aus den Standardkomponenten, jeweils mit Live-Vorschau und Code zum Kopieren: Login-Karte, Statistiken, Preisschalter, Einstellungen, Tabs, Löschbestätigung, Leerzustand und Teamliste.
shadcn/ui ist eine Sammlung von React-Komponenten, die du mit der CLI in dein Projekt kopierst, statt sie als Abhängigkeit zu installieren. Sie bauen auf Radix-Primitives auf und werden mit Tailwind gestaltet. Der Nutzen entsteht durch die Kombination: Unten findest du acht alltägliche Blöcke wie eine Login-Karte, einen Preisschalter und eine Löschbestätigung, jeweils live mit Code.
Was du bekommst
Die Vorschauen laufen auf dieser Seite mit unseren eigenen Kopien derselben Komponenten, gestaltet in unseren Farben, daher sehen Buttons und Ecken etwas anders aus als im Standard-Theme. Der Code ist reines shadcn/ui und funktioniert, nachdem du den zuerst gezeigten add-Befehl ausgeführt hast.
Ja. shadcn/ui ist Open Source unter der MIT-Lizenz, du kannst die Komponenten also in kommerziellen Projekten nutzen und verändern.
Nicht im üblichen Sinn. Es gibt kein Komponentenpaket, das du aktualisierst; die CLI kopiert den Quellcode in dein Projekt, und ab dann gehört er dir. Das macht Änderungen leicht, bedeutet aber, dass Updates manuell erfolgen.
Ja. Es funktioniert in jedem React-Setup mit Tailwind, auch mit Vite, React Router und Astro mit React. Die CLI fragt beim init, welches Framework du nutzt.
Die offizielle Website hat eine Sammlung von Blöcken, und viele Community-Templates bauen daraus komplette Seiten. Für einen schnellen Start setzt du Abschnitte wie die hier zu einer Seite zusammen oder nutzt einen Website-Baukasten für die Marketing-Website und behältst shadcn/ui für die App.
shadcn/ui ist kein Paket, das du von npm importierst. Die CLI kopiert den Quellcode jeder Komponente in dein Projekt, sodass er dir gehört und du ihn bearbeiten kannst.
Welche Komponenten jeder Block nutzt
Card, Label, Input und Button. Jedes Eingabefeld hat ein sichtbares Label, das per htmlFor verknüpft ist; der Zusatzlink steht neben dem Label, zu dem er gehört.
Drei Karten in einem responsiven Grid. tabular-nums verhindert, dass die Zahlen springen, wenn sie sich ändern.
Ein Switch wechselt zwischen Monats- und Jahrespreisen. Das Label ist anklickbar, und die Preisänderung wird angesagt, weil sie in einer aria-live-Region steht.
Jede Zeile kombiniert Label und Beschreibung mit einem Switch. Mit Label htmlFor wird der ganze Text anklickbar, nicht nur der kleine Schalter.
shadcn Tabs bauen auf Radix auf, daher funktionieren Pfeiltasten, Home und End bereits, und die ARIA-Rollen sind für dich gesetzt.
Dialog kümmert sich um den Fokus-Trap, Escape und die Rückgabe des Fokus an den Auslöser. Der Lösch-Button sollte genau sagen, was passieren wird.
Ein freundlicher Leerzustand sagt, was hier erscheinen wird, und bietet die eine Aktion an, die ihn füllt.
Avatar zeigt das Foto und greift auf Initialen zurück, wenn es fehlt oder noch lädt. Das Bild braucht einen Alt-Text mit dem Namen der Person.
Baust du ein Formular oder eine Datentabelle? Sieh dir an:
Kunden einen Tag vorher per E-Mail erinnern.
Nach jedem Besuch um eine Bewertung bitten.
Inhaberin
Stylist
Anmelden
Nutze die E-Mail-Adresse, mit der du gebucht hast.
Passwort
Vergessen?
Jährlich zahlen
Studio
Studio wählen
Benachrichtigungen
Profil
Abrechnung
Dein Name, Foto und deine Kurzbiografie.
Dein Tarif und deine Rechnungen.
Seite löschen
"Über uns" löschen?
Damit werden die Seite und ihr Menülink entfernt. Das lässt sich nicht rückgängig machen.
Seite behalten
Gelöscht (nur Demo, es wurde nichts entfernt).
Noch keine Buchungen
Teile deinen Buchungslink, dann erscheinen neue Buchungen hier.
Buchungslink kopieren
Manuell hinzufügen
Kostenlos starten · Keine Kreditkarte nötig