React UI-Komponenten: 15 beliebte Bibliotheken

React gibt es jetzt seit mehr als einem Jahrzehnt. Was verrückt ist, darüber nachzudenken. Aber trotz ihres Alters zieht die React-Bibliothek mehr als 14 Millionen wöchentliche Downloads an. Es gibt auch mehr als 80.000 andere Open-Source-Projekte, die auf React angewiesen sind , um zu funktionieren.

Viele dieser Projekte erweitern React umfassend. Insbesondere erstellen Entwickler benutzerdefinierte Elemente und Komponenten, die während der App-Entwicklung wiederverwendet werden können. Tatsächlich dreht sich die Arbeit mit React fast ausschließlich um Komponenten. Wenn Sie schnell ein MVP zusammenstellen oder ein App-Layout erstellen möchten – Komponenten machen den Prozess schnell und zugänglich.

Wenn Sie Ihr Verständnis von React auffrischen möchten, lesen Sie diesen Artikel von Linton Ye.

Sollten Sie eine React-UI-Komponentenbibliothek verwenden?

React ist von Natur aus eine Bibliothek zum Erstellen von Benutzeroberflächen. Komponenten in diesem Kontext sind vorgefertigte UI-Elemente, die Sie in Ihrem Entwicklungsprozess wiederverwenden können. React-Komponenten (oder andere Frameworks) zielen darauf ab, das Tempo zu beschleunigen, mit dem Sie Apps erstellen.

Die Verwendung einer Komponentenbibliothek bietet jedoch auch einige wesentliche Vorteile:

• Entwicklungstempo. Da die Komponenten vorgefertigt sind, können Sie schnell einen funktionierenden Prototyp dessen zusammenstellen, wie Ihre App am Ende aussehen soll.
• Produktivität. Jede einzelne Komponentenbibliothek umfasst Designelemente wie Formulare, Schaltflächen und Abschnitte. Sie müssen diese Elemente also nicht selbst entwerfen.
• Design Vertrautheit. Kreativität hat ihren Platz, aber die Bereitstellung eines vertrauten Designerlebnisses für Ihre Benutzer ist unerlässlich, wenn Sie ein reibungsloses Erlebnis bieten möchten.
• Neueste Standards. Insbesondere werden die meisten modernen Bibliotheken so entwickelt, dass die Komponenten den neuesten Zugänglichkeitsstandards entsprechen.

Was die potenziellen Nachteile betrifft, so verlassen Sie sich in den meisten Fällen auf die Unterstützung des Entwicklers/der Community. Und es ist auch ein bisschen eine Lernkurve, um eine neue Bibliothek zu meistern, aber im Gesamtbild sind es definitiv kleine Kartoffeln eines Problems.

Was ist ein Designsystem?

Reaktionskomponenten fallen in eine Vielzahl von Kategorien. Sie können aus „einzelnen“ Komponenten oder einer vollwertigen UI-Komponentenbibliothek wählen. Und in vielen Fällen enthalten diese vollwertigen Bibliotheken ein komplettes Designsystem.

Einfach ausgedrückt ist ein Designsystem ein vollständiger Satz von Komponenten, die zum Erstellen von Anwendungen in großem Maßstab verwendet werden können. Sie haben wahrscheinlich schon von Googles Material UI, dem Polaris-Designsystem von Shopify und vielen anderen gehört.

Wenn überhaupt, hilft ein Designsystem dabei, eine konsistente Benutzererfahrung zu schaffen, indem dieselben UI-Komponenten wiederverwendet werden. Glücklicherweise bringt jede Bibliothek ein einzigartiges Designkonzept hervor.

Einfache Kriterien

Bei der Zusammenstellung dieser Zusammenfassung habe ich einfache Kriterien befolgt, um sicherzustellen, dass diese Liste relevant und aktuell bleibt:

• Vollständig. Wie in ist jede Bibliothek vollständig erweitert und deckt eine Vielzahl von UI-Elementen ab.
• Barrierefreiheit. Dies ist spezifisch für Entwicklungserfahrung. Mein Hauptanliegen ist, dass die gegebene Komponentenbibliothek aus Entwicklersicht einfach zu handhaben sein sollte.
• Aktiv. Wie in hat die Bibliothek sowohl eine aktive Anhängerschaft als auch wird häufig aktualisiert.

Ich habe auch Dinge wie die Popularität von GitHub und die allgemeine Traktion unter Webentwicklungstutorials usw. berücksichtigt. Wenn eine neue React-Komponentenbibliothek auftaucht und vielversprechend ist, werde ich mein Bestes tun, um sie schließlich in diese Liste aufzunehmen.

Lass uns genauer hinschauen.

Mantine

Mantine ist eine umfangreiche UI-Komponentenbibliothek, die verschiedene Elemente abdeckt und Hooks für jedes enthält. Die von Vitaly Rtishchev erstellte Bibliothek hat seit ihrer ersten Veröffentlichung im Jahr 2021 eine große Fangemeinde angezogen. Mantine enthält ein natives dunkles Design, und alle Komponenten sind sowohl im hellen als auch im dunklen Stil verfügbar.

Insgesamt gibt es über 120 benutzerdefinierte Komponenten.

Die Dokumentation deckt eine breite Palette von Anwendungsfällen ab, einschließlich der Verwendung von Mantine mit Next.js und Gatsby. Das Projekt befindet sich sehr aktiv in der Entwicklung. Und wie einige Entwickler gesagt haben: „Die Dokumentation ist beispiellos.“ .

Chakra

Chakra ist eine der am schnellsten wachsenden React-UI-Bibliotheken. Die Prämisse einfacher und zugänglicher Komponenten bedeutet, dass Sie sofort mit dem Bootstrapping Ihrer Apps beginnen können. Darüber hinaus folgt Chakra einem strengen Ethos der Designprinzipien. Jede Komponente wird mit einer einzigartigen Stilstütze geliefert, was bedeutet, dass Sie die Stile der Komponenten individuell anpassen können.

Wenn man Chakra mit starreren Komponentenbibliotheken vergleicht, ist es offensichtlich, dass Chakra in einer unbeeinflussten Umgebung funktioniert. Dadurch wird das Skalieren von Apps und Schnittstellen einfacher, da Sie sich nicht auf strenge Eigenschaftsspezifikationen verlassen müssen.

Weitere bemerkenswerte Funktionen sind TypeScript-Unterstützung, Zugänglichkeit über WAI-ARIA und a11y und Styled System für Prop-Styling.

Material-UI

Braucht Material Design überhaupt noch eine Einführung? Die MUI-Bibliothek implementiert das gesamte Google-Designsystem in eine erweiterte React-Bibliothek. MUI ist auch eine der beliebtesten Bibliotheken in dieser Branche. Mit fast 75.000 Sternen auf GitHub ist die Popularität von MUI ziemlich klar. Was macht es also zu einem solchen Erfolg?

In erster Linie wird MUI als Marke betrieben und nicht nur als Open-Source-Projekt. Das bedeutet, dass die Komponenten zum Schutz ihrer Markenintegrität perfekt gestylt sind. Dasselbe gilt für die Dokumentation, die nicht der durchschnittliche „Hier ist ein Beispiel“ -Typ ist.

Das Beste daran ist jedoch, wie viele Menschen sich auf MUI verlassen. Da das Projekt so beliebt ist, gibt es unzählige kostenlose Ressourcen, die Ihnen den Einstieg erleichtern. Landing-Page-Vorlagen, ein Modell des Blog-Designs und Portfolio-Stile. Denken Sie an ein Projekt, und die Chancen stehen gut, dass jemand bereits einen Boilerplate für etwas Ähnliches veröffentlicht hat.

Gestalt

Gestalt ist „ eine Reihe von React-UI-Komponenten, die die Designsprache von Pinterest unterstützen“ . Mit anderen Worten, es ist das Designsystem, das von den Entwickler- und Designerteams von Pinterest verwendet wird.

Bei genauerer Betrachtung unterscheidet sich Gestalt von anderen Designsystemen dadurch, dass es eine robuste Grundlage bietet, die auf modernen Webstandards basiert. Zu diesen Standards gehören Zugänglichkeit, dauerhafte Farboptionen und eine umfassende Variablenoptimierung.

Und da Pinterest React selbst in der Produktion verwendet, verfügt jede einzelne Komponente in dieser Bibliothek über eine vorgefertigte React-Komponente, die sofort verfügbar ist.

PrimeReact

PrimeReact hat vielleicht nicht das Marketingbudget von Giganten, aber es ist dennoch eine außergewöhnliche Bibliothek. Aufgrund seiner agnostischen Natur ist PrimeReact stilunabhängig.

Daher können Sie es mit beliebten Styleguides wie Tailwind, Material, Bootstrap, Arya und anderen verwenden. Sie können das Basisthema mit der Designer-Funktion auswählen.

Die Komponenten selbst decken alles ab, was Sie von einer umfangreichen Bibliothek erwarten würden. Menüs, verschiedene Bedienfelder, Datentabellen und vieles mehr. PrimeReact ist Teil des PrimeFaces-Projekts. Auf diese Weise können Sie schnell auf ihre anderen Ressourcen wie Themen und Blöcke zugreifen.

Bootstrap

Können Sie sich überhaupt als Frontend-Entwickler bezeichnen, wenn Sie Bootstrap noch nie ausprobiert haben? Das allzeit beliebte Front-End-Toolkit ( subjektiv ) hat auch eine React-Bibliothek. Und es wurde von Grund auf so konzipiert, dass es zuerst reagiert. Jede Komponente wurde speziell entwickelt, um Bootstrap-Funktionen einzuschließen, ist aber unabhängig von jQuery.

Ein bemerkenswertes Merkmal dieser Bibliothek ist, dass sie ausschließlich den Bootstrap-Styleguide verwendet.

Daher ist es möglich, React Bootstrap mit Designs zu verwenden, die auf dem ursprünglichen Stylesheet basieren. Sie können beispielsweise ein auf Bootstrap basierendes WordPress-Theme nehmen und es schnell als React-basiertes Design umstrukturieren.

Immergrün

Evergreen ist die erste Bibliothek in dieser Liste, die auch ein Designsystem ist. Und es wird großzügig von Segment zur Verfügung gestellt. Wenn Sie sich also die Website und das Produkt von Segment ansehen, wissen Sie, dass sie auf Evergreen basiert. Allerdings wird diese Bibliothek Sie nicht an eine bestimmte Konfiguration binden oder eine unorthodoxe Integration erfordern.

In ihren eigenen Worten: „Anstatt feste Konfigurationen zu erstellen, die heute funktionieren, fördert Evergreen den Bau von Systemen, die neue und sich ändernde Designanforderungen antizipieren.“

Alle Komponenten sind auch als Figma-Datei verfügbar.

Die Bibliothek wird mit 2 benutzerdefinierten Designs geliefert: Classic und Standard . Und Sie haben die Möglichkeit, benutzerdefinierte Stile für jedes Thema zu definieren oder einfach ein neues von Grund auf neu zu erstellen.

Arco-Design

Die chinesische Entwicklergemeinschaft hat einige tadellose Beiträge zu Open Source geleistet. Und Arco ist da keine Ausnahme. Diese Komponentenbibliothek für Unternehmen wird den Prozess der Erstellung moderner Schnittstellen verändern. Es ist auch ein Designsystem, das sicherstellt, dass Ihre gesamte Designgrundlage einer strengen Routine folgt.

Arco zeichnet sich durch seine raffinierte Designphilosophie aus. Ihr Designsystem betont die Zugänglichkeit, aber auch die Benutzererfahrung. Ein Beispiel dafür ist ihre Herangehensweise an das Formulardesign.

Die Formulare versuchen weitgehend, eine Aktion synchron abzuschließen. Anstatt ein externes Modal bereitzustellen, spezialisiert sich Arco auf Echtzeit-Feedback basierend auf Benutzereingaben. Ihre Komponenten können auch heruntergeladen werden, um sie in Figma bzw. Sketch zu verwenden.

Geist

Geist UI wurde durch Forken des von Vercel bereitgestellten Designsystems erstellt. Mein erster Eindruck von Geist ist eher minimalistisch. Das macht es perfekt zum Erstellen von Zielseiten und Portfolio-Websites.

Offensichtlich wurde es jedoch sowohl in Webanwendungen als auch in komplexeren Projektbereitstellungen eingesetzt. In den letzten Updates hat Geist die Möglichkeit implementiert, Themen hinzuzufügen.

Wenn Sie also die Struktur und die Komponentenvielfalt mögen, ist die Implementierung eines benutzerdefinierten Stils unkompliziert. Sie können auch benutzerdefinierte Stile für einzelne Komponenten aufrufen.

Fließende Benutzeroberfläche

React ist eine so bahnbrechende Technologie, dass die gesamte Microsoft 365-Suite darauf basiert.

Nun, natürlich über die Fluent-Benutzeroberfläche.

Fluent ist Microsofts Vorstellung davon, wie eine React-Komponentenbibliothek aussehen sollte.

Und ehrlich gesagt, obwohl es UI-Komponenten bereitstellt, tut es viel mehr.

Das Fluent UI Utilities-Paket enthält viele Klassen, Funktionen und Schnittstellen. Diese helfen Ihnen dabei, reichhaltige und interaktive Benutzererlebnisse zu erstellen. Fluent ist mehr als nur das Erstellen von Apps, es hilft Ihnen dabei, echte Unternehmenserlebnisse zu schaffen.

Es wird auch von Microsoft verwaltet. Dinge wie Zuverlässigkeitsprobleme kommen also nicht in Frage.

Radix

Eine der Hauptattraktionen jeder Art von Komponentenbibliothek ist der Stil. Ist es ordentlich, geeky oder professionell aussehend? Repliziert es eine beliebte Web-App? Das sind alles berechtigte Fragen.

Radix UI ist jedoch auf einen anderen Ansatz spezialisiert.

Radix, eine Low-Level-Komponentenbibliothek, betont die Zugänglichkeit und das Potenzial für benutzerdefiniertes Styling. Dazu werden die Komponenten als Barebone-Basis eingeführt.

Da die Komponenten roh geliefert werden, können Sie tief in die kreative Freiheit eintauchen, um sie selbst zu stylen. Im Gegenzug bietet Radix eine native Barrierefreiheitsimplementierung. Darüber hinaus sind die Komponenten so konzipiert, dass sie granular sind und eine benutzerdefinierte Styleguide-Integration ermöglichen.

Reakit

Reakit ist ein umfangreiches Toolkit zur Pflege von Rich-Web-Anwendungen. Es ist per Design zugänglich und implementiert eine Bundle-Struktur. Das bedeutet, dass Sie einzelne Komponenten verwenden und andere deaktivieren können. Dadurch kann die Paketgröße immens gebündelt werden.

Es ist wichtig zu beachten, dass Reakit keinen Standardstil enthält. Dies macht es auch zu einer „Low-Level“-Komponentenbibliothek. Welcome UI – mit Reakit – ist ein Beispiel dafür, wie Sie benutzerdefinierte Stile erstellen können. Es sollte jedoch nicht schwierig sein, es mit etwas wie Rückenwind zu verwenden.

Halb

Das Semi-Design-System versorgt das gesamte TikTok-Front-End. Es ist als umfassende UI-Bibliothek für Unternehmen konzipiert. Abgesehen von den modularen Komponenten veröffentlicht Semi vor allem auch sein UI-Kit auf Figma. Dies trägt dazu bei, den Prozess des Entwerfens Ihrer Apps zu beschleunigen und Entwickler an Bord zu holen.

Was die Thematisierung betrifft, so hat Semi eine benutzerdefinierte „Do it yourself“-Plattform, die für diesen Zweck entwickelt wurde. Das Ziel ist es, das Tempo zu beschleunigen, mit dem Sie ein System definieren und es dann in Produktion bringen.

Ameisen-Design

Der Einfluss von Modern und Accessible aus Fernost ist kaum zu übersehen. Ant Design ist die beliebteste Komponentenbibliothek auf GitHub. Zumindest für React. Es stellt nicht nur UI-Komponenten bereit, sondern ist auch eine Designsprache . Details siehe hier.

Eines der Dinge, die Ant so beliebt machen, sind die verfügbaren Ressourcen. Das Kernteam, das Ant betreut, hat in diesem Bereich außergewöhnliche Arbeit geleistet. Sie können aus vorgefertigten Vorlagen oder benutzerdefinierten mobilen Erfahrungen auswählen oder tief in die Dokumentation eintauchen.

Um das Aufblähen zu minimieren, implementiert Ant außerdem eine Struktur eines Drittanbieters. Während ihre Bibliothek viele UI-Elemente und Layouts abdeckt, erfolgt das Hinzufügen zusätzlicher Funktionen am besten über externe Bibliotheken. Viele solcher Bibliotheken folgen bereits der Ant-Designspezifikation.

Reaktionssuite

Die React Suite ist auf leicht zugängliche interaktive Designkomponenten spezialisiert. Es wurde speziell für Back-End-Projekte entwickelt.

Sie können es jedoch in jedem Frontend-Workflow implementieren.

Die Bibliothek bietet eine Auswahl unterschiedlicher Themen: hell, dunkel und hoher Kontrast. Was das benutzerdefinierte Styling angeht, verwenden Sie Less.

Spektrum

Adobe wird für seine Designbeiträge in die Hall of Fame aufgenommen. Und es ist keine Überraschung, dass sie ihr Designsystem Spectrum der Open-Source-Community zur Verfügung gestellt haben. Es ist das eigentliche Designsystem, das Adobe selbst verwendet.

Spectrum verwendet sowohl Flex als auch Grid zur Implementierung von Layouts. Und einige ihrer Komponenten basieren auf einem benutzerdefinierten Slots-Layout. Mit diesen „Slots“ können Sie einzelne Layouts gestalten und bestimmte Elemente ihrer verschachtelten Gruppe zuweisen.

Interessanterweise rät Adobe Entwicklern und Designern davon ab, ihren vorgefertigten Stil anzupassen. Die Idee ist, dass Spectrum bereits auf Konsistenz ausgelegt ist. Und anstatt am Stil herumzuspielen, sollte das Ziel darin bestehen, nahtlose Benutzererlebnisse zu schaffen.

In den letzten Nachrichten arbeitet Adobe auch an React Aria – einer Sammlung von React Hooks , die als Accessibility-First-UI-Grundelemente fungieren. Letztendlich besteht das Ziel von React Aria darin, Ihnen die Freiheit zu geben, Ihre eigene Komponentenbibliothek aufzubauen, indem Sie von Anfang an Best Practices für Barrierefreiheit implementieren.

Basis-Web

Eine der Hauptattraktionen von Komponentenbibliotheken ist, dass sie praxiserprobt sind. Und im Fall von Base Web ist es das von Uber verwendete Designsystem. Ja, die Mitfahr-App.

Base ist auf die Anpassung vieler Anwendungen gleichzeitig spezialisiert. Ziel ist es, eine einfache Lösung bereitzustellen, um Komponenten über verschiedene Entwicklungspfade hinweg wiederzuverwenden. Wenn Sie beispielsweise mit der Arbeit an einem neuen Design beginnen, bleibt die Themenumgebung gleich.

Alle Themen mit Base können in JavaScript, Flow und TypeScript durchgeführt werden.

Schaltungs-UI

Es ist großartig zu sehen, dass Unternehmen des privaten Sektors wie SumUp so bedeutende Open-Source-Beiträge leisten. Circuit UI ist das Designsystem, das in der SumUp-Infrastruktur verwendet wird. Es basiert auf einigen ausgewählten Prinzipien, die die bestmögliche Benutzererfahrung gewährleisten.

Zu diesen Prinzipien gehören das Testen von Code vor dem Festschreiben, vollständige Zugänglichkeit, standardisierte Benennung und mehr. Neben dem Hauptpaket erhalten Sie auch Zugriff auf ihre Design-Tokens (Primitive) und ein Symbolpaket.

NextUI

NextUI verwendet eine der Bibliotheken – als Basis – die wir uns zuvor angesehen haben – Geist. Die komplexe Herangehensweise an Details von NextUI ermöglicht es selbst den am wenigsten erfahrenen Designern, schöne Websites und Apps zusammenzustellen. Und die umfangreiche Dokumentation erklärt hervorragend, wie Sie Ihr erstes NextUI-Projekt bereitstellen.

Einige bemerkenswerte Merkmale sind:

• Serverseitiges Rendering mit vollständiger Cross-Browser-Unterstützung.
• Integrierte Zugänglichkeitsfunktionen mit vollständiger WAI-ARIA-Konformität.
• Verwendet Stitches, um unnötiges Laden von CSS zu vermeiden. Laden Sie nur das, was Sie brauchen.

Und schließlich wird es bei Next.js-Benutzern zu einer äußerst beliebten Wahl.

Winzige Benutzeroberfläche

Tiny UI bietet React Hook-Komponenten, die in TypeScript geschrieben sind. Die Hauptattraktion dieser Komponentenbibliothek ist ihre geringe Größe und dennoch anpassbare Natur.

Insbesondere können Sie ein benutzerdefiniertes Design vordefinieren, bevor Sie mit Ihrem neuen Projekt beginnen.

Die Komponenten reichen von kleinen Layoutelementen bis hin zu spezifischeren Dingen wie Feedback-Formularen, Modals und Konfigurationsmanagern.

Komponentengesteuerte Webentwicklung

Dank all dieser wunderbaren Bibliotheken können Sie sich jetzt davon befreien, jemals wieder CSS zu schreiben! Abgesehen von allen Witzen gibt es in dieser Liste viele großartige Möglichkeiten.

Wenn Sie sich jemals davon abgehalten gefühlt haben, komplexe Designstrukturen zu erstellen, werden diese Bibliotheken einen Teil dieser Unsicherheit lindern. Abgesehen von der umfangreichen Dokumentation haben viele der oben genannten Bibliotheken eine starke Community-Unterstützung.

Daher finden Sie immer zusätzliche Erweiterungen und Implementierungen.