21st.dev

21st.dev ist ein offenes Verzeichnis für React-Komponenten im Tailwind-CSS-Stil, aufgebaut nach dem Vorbild von shadcn/ui. Designerinnen und Entwickler veröffentlichen fertige Komponenten und ganze Vorlagen, andere durchsuchen den Bestand, prüfen eine Live-Vorschau und übernehmen den Code direkt in ihr eigenes Projekt. Jede Komponente liegt als Quellcode vor, nicht als importierte Abhängigkeit: Der Code landet im eigenen Repository und bleibt dort frei veränderbar. Zur Installation dient wahlweise ein klassischer shadcn-CLI-Befehl oder ein sogenannter Copy-Prompt, der sich in Werkzeuge wie Cursor, Claude Code, v0 oder Lovable einfügen lässt und dort automatisch an den vorhandenen Stack angepasst wird. Nach Angaben des Anbieters nutzen über 700.000 Entwicklerinnen und Entwickler die Plattform.

Vorausgesetzt wird ein Projekt auf Basis von React ab Version 18, idealerweise mit Tailwind CSS in Version 4 und einer shadcn/ui-kompatiblen Grundstruktur. Läuft ein Projekt noch auf Tailwind v3, verlangen manche Komponenten eine Anpassung der Theme-Konfiguration oder der Utility-Klassen. Die Lizenz ist nicht einheitlich geregelt, sondern wird pro Komponente von der veröffentlichenden Person festgelegt: Der überwiegende Teil steht unter der MIT-Lizenz, ein Teil ist kostenpflichtig. Vor jeder Übernahme lohnt sich deshalb ein Blick auf die Lizenzangabe der jeweiligen Komponente.

Im Unterschied zu einer klassischen Komponentenbibliothek mit einem durchgängigen Design liefert 21st.dev viele Stile nebeneinander, kuratiert über ein Review durch die Betreiber und sichtbare Kennzahlen wie Aufrufe oder Autor-Reputation. Das macht die Plattform zur zentralen Anlaufstelle, wenn ganze Abschnitte wie Hero-Bereiche, Pricing-Tabellen, Feature-Grids, Testimonials oder Dashboard-Module gebraucht werden, statt einzelner kleiner UI-Elemente. Wer eine reine Utility-Bibliothek mit stabilem, einheitlichem Designsystem sucht oder außerhalb des React-, Tailwind- und shadcn-Ökosystems arbeitet, ist mit einer dedizierten Komponentenbibliothek besser bedient.

21st.dev lässt sich unter 21st.dev kostenlos durchsuchen, mit einem täglichen Kontingent von zwei kostenlosen Komponenten-Kopien ohne Mitgliedschaft. Eine kostenpflichtige Builder-Mitgliedschaft schaltet unbegrenzte Kopien sowie Premium-Vorlagen frei, eine erweiterte Builder+AI-Stufe ergänzt monatliche Guthaben für KI-gestützte Komponentengenerierung über mehrere Modelle, und ein Team-Plan richtet sich an Agenturen und größere Organisationen. Die Tarifpreise nennt der Anbieter auf seiner Pricing-Seite, Abonnements lassen sich laut Anbieter jederzeit kündigen.