21st.dev: eine Open-Source-Plattform für die schnelle Beschaffung und den Austausch von React UI-Komponenten

21st.dev ist eine Open-Source-Plattform, die sich auf die Erstellung, den Austausch und die Installation von React UI-Komponenten konzentriert. Inspiriert von shadcn/ui, bietet sie leichtgewichtige, moderne Komponenten auf Basis von Tailwind CSS und Radix UI. Entwickler können Komponenten schnell installieren, ihre Arbeit veröffentlichen oder mehrere UI-Varianten durch AI generieren. Die Plattform unterstützt TypeScript und ist einfach über dienpx shadcnDie Komponenten können mit Befehlen integriert werden. Das Community-gesteuerte Modell ermutigt Entwickler, Beiträge zu leisten, und eignet sich für Front-End-Entwickler und Design-Ingenieure, um schnell schöne Schnittstellen zu erstellen.

Funktionsliste

• Bietet shadcn/ui-basierte React-Komponenten mit Unterstützung für Tailwind CSS und Radix UI.
• ausnutzennpx shadcnum Komponenten und ihre Abhängigkeiten mit einem Klick zu installieren.
• Unterstützt die AI-Generierung von fünf UI-Komponentenvarianten für die Auswahl oder Anpassung durch den Benutzer.
• Ermöglichen Sie es Entwicklern, benutzerdefinierte Komponenten zu veröffentlichen und mit der Community zu teilen.
• Bietet mehrere Komponenten-Demonstrationen, einschließlich Vorschauen und Videopräsentationen.
• Durch die TypeScript-Unterstützung sind die Komponenten leichtgewichtig und anpassbar.
• Integrierte Remix-Funktion zur Anpassung von Komponentenstilen über KI oder Chat.
• Die Unterstützung der Open-Source-Community ermutigt die Nutzer, über GitHub Code beizusteuern.

Hilfe verwenden

Installation und Nutzung

Die Installation der Komponenten von 21st.dev ist sehr einfach und erfolgt hauptsächlich über dienpx shadcnBefehl zu beenden. Im Folgenden werden die einzelnen Schritte beschrieben:

1. Vorbereiten der Entwicklungsumgebung
   Stellen Sie sicher, dass Ihr Projekt Node.js und npm installiert hat. Moderne Frontend-Frameworks wie Next.js oder Vite werden empfohlen. Die Projekte müssen React und Tailwind CSS unterstützen.
2. installierte Komponente
   Öffnen Sie ein Terminal im Stammverzeichnis des Projekts und führen Sie die folgenden Befehle aus, um die erforderlichen Komponenten zu installieren. Installieren Sie zum Beispiel die Akkordeon-Komponente:

   npx shadcn@latest add "https://21st.dev/r/shadcn/accordion"
   

Dieser Befehl erfolgt automatisch:

• Laden Sie den Komponentencode und seine Abhängigkeiten herunter.
• Erstellen Sie die erforderlichen Dateien (z. B. JSX und CSS).
• Aktualisieren Sie die Tailwind-Konfigurationsdatei, um Themenstile hinzuzufügen.
• Konfigurieren Sie globale Stile (falls erforderlich).

Im Gegensatz zum manuellen Kopieren des Codes ist dienpx shadcnstellt sicher, dass die Abhängigkeiten vollständig sind, und vermeidet Konfigurationsfehler. Nach der Installation ist die Komponente bereit, im Projekt verwendet zu werden.

3. Komponenten verwenden
   Wenn die Installation abgeschlossen ist, erscheint die Komponente im angegebenen Verzeichnis des Projekts (normalerweise dascomponentsOrdner). Der Code für die Verwendung der Akkordeonkomponente lautet beispielsweise wie folgt:

   import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
   export default function MyComponent() {
   return (
   <Accordion type="single" collapsible>
   <AccordionItem value="item-1">
   <AccordionTrigger>标题</AccordionTrigger>
   <AccordionContent>内容</AccordionContent>
   </AccordionItem>
   </Accordion>
   );
   }
   

   Sie können den Stil oder die Logik an die Bedürfnisse Ihres Projekts anpassen.

Featured Function Bedienung

AI-generierte Komponentenvarianten

Die Funktion "Magic Agent" von 21st.dev erzeugt fünf Varianten von UI-Komponenten durch KI. Die Schritte sind wie folgt:

1. Besuchen Sie 21st.dev und geben Sie die Anforderungen an die Komponente ein (z.B. "Login Form").
2. Wenn Sie auf die Schaltfläche "Generieren" klicken, erhalten Sie eine Vorschau mit fünf verschiedenen Stilen von Komponenten.
3. Wählen Sie eine Variante aus und klicken Sie auf die Schaltfläche "Remix with AI", um das Layout, die Farbe oder die Abstände weiter anzupassen.
4. Interagieren Sie mit der KI über die Chat-Schnittstelle, geben Sie spezifische Anforderungen ein (z. B. "Vergrößerung des Tastenabstands"), und die KI wird den Code in Echtzeit ändern.
5. Laden Sie zufriedenstellende Komponenten herunter oder kopieren Sie den Code direkt in Ihr Projekt.

Benutzerdefinierte Komponenten veröffentlichen

Entwickler können ihre Komponenten mit den folgenden Schritten freigeben:

1. Melden Sie sich bei 21st.dev an und gehen Sie auf die Seite "Veröffentlichen".
2. Laden Sie den Komponentencode hoch, geben Sie die Beschreibung, die Tags und die Demo-Vorschau ein.
3. Nach der Übermittlung geht die Komponente in den "on_review"-Zustand über und ist nur über den direkten Link sichtbar.
4. Nach der Genehmigung wechselt die Komponente in den Status "veröffentlicht" und erscheint auf Ihrem Profil und Ihren Gemeinschaftsseiten.
5. Andere Benutzer können über dienpx shadcnInstallieren Sie Ihre Komponenten.

Beiträge der Gemeinschaft

21st.dev ermutigt Entwickler, sich an Open-Source-Beiträgen zu beteiligen:

1. Besuchen Sie das GitHub-Repository (https://github.com/21st-dev).
2. Fork Repository und klonen Sie es lokal.
3. Verwenden Sie einen Editor (z. B. Cursor), um neue Komponenten zu entwickeln oder Probleme zu beheben.
4. Senden Sie einen Pull Request an den Master-Zweig und warten Sie auf die Überprüfung.
5. Treten Sie der Discord-Community bei und tauschen Sie sich mit anderen Entwicklern aus.

caveat

• Vergewissern Sie sich, dass das Tailwind-CSS korrekt konfiguriert wurde, da sonst die Komponentenstile möglicherweise nicht funktionieren.
• KI-generierte Komponenten erfordern möglicherweise manuelle Codeanpassungen an das Projekt.
• Die Bereitstellung einer klaren Dokumentation und von Demos bei der Freigabe von Komponenten hilft, das Audit zu bestehen.

Anwendungsszenario

1. Schnelles Erstellen von Front-End-Schnittstellen
   Front-End-Entwickler können bei der Entwicklung von Webanwendungen Entwicklungszeit sparen, indem sie über 21st.dev vorgefertigte Komponenten (wie Schaltflächen, Formulare, Navigationsleisten) erhalten. Nach der Installation können Sie den Stil direkt an die Bedürfnisse des Projekts anpassen.
2. Bauteilfreigabe für Konstrukteure
   Design-Ingenieure können gut entworfene UI-Komponenten auf der Plattform veröffentlichen, damit andere Entwickler sie nutzen können, und ihre Arbeit durch das Feedback der Community optimieren.
3. AI-unterstützte UI-Iteration
   Produktmanager oder Anfänger können mithilfe von KI mehrere UI-Varianten generieren, um Designideen ohne tiefgreifende Programmierung schnell zu validieren.
4. Entwicklung von Open-Source-Projekten
   Open-Source-Projektteams können die Komponentenbibliothek von 21st.dev nutzen, um den Stil der Benutzeroberfläche zu vereinheitlichen, und gleichzeitig ihre eigenen Komponenten beisteuern, um den Einfluss des Projekts zu erweitern.

QA

1. Sind die Komponenten von 21st.dev kostenlos?
   Ja, 21st.dev ist eine Open-Source-Plattform und alle Komponenten können kostenlos genutzt werden, aber für einige fortgeschrittene Funktionen ist ein Abonnement erforderlich (z. B. eine höhere KI-Generierungsquote).
2. Wie kann ich sicherstellen, dass die Komponenten mit meinem Projekt kompatibel sind?
   Die Komponenten werden auf der Grundlage von React, Tailwind CSS und Radix UI entwickelt. Stellen Sie sicher, dass das Projekt diese Technologie-Stacks unterstützt und dass Tailwind CSS für die Kompatibilität richtig konfiguriert ist.
3. Sind KI-generierte Komponenten im Handel erhältlich?
   Ja, aber prüfen Sie das Open-Source-Protokoll (z. B. MIT) für die jeweilige Komponente. Es wird empfohlen, vor der Kommerzialisierung das Urheberrecht zu bestätigen.
4. Wie lange dauert es, eine Komponente zur Überprüfung zu veröffentlichen?
   In der Regel 1-3 Tage, abhängig von der Vollständigkeit der Komponenten und der Qualität der Dokumentation.