Eine Component Library ist eine Sammlung fertiger Komponenten für Benutzeroberflächen, die als Code vorliegt und sich in Projekte einbinden lässt. Bekannte Beispiele sind MUI und Chakra UI für React, Vuetify für Vue.js und Angular Material.
- Component Library
Eine Sammlung fertig programmierter Oberflächenbausteine, die ein Projekt als Paket einbindet.
Beispiel: „Für die drei Kundenportale pflegen wir eine gemeinsame Component Library, damit Buttons und Formulare überall gleich funktionieren.“Auch: UI-Bibliothek oder Komponentenbibliothek.
Abgrenzung zum UI-Kit: Ein UI-Kit liegt im Design-Werkzeug, die Component Library im Code. Im besten Fall hat jeder Baustein in beiden ein Gegenstück.
Was eine Component Library enthält
Die Grundbausteine einer Oberfläche als fertige Komponenten: Buttons, Eingabefelder, Auswahllisten, Dialoge, Tabellen, Menüs und Benachrichtigungen. Dazu kommen eine Dokumentation mit Beispielen und meist ein Theme, über das Farben und Schriften angepasst werden.
Gute Bibliotheken nehmen außerdem die schwierigen Teile ab: Tastaturbedienung, Fokusführung und die Attribute für Screenreader.
Bekannte Bibliotheken unterscheiden sich vor allem darin, wie viel Optik sie vorgeben. MUI bringt Material Design mit, Chakra UI eine zurückhaltende Grundgestaltung, und Headless-Bibliotheken wie Radix UI liefern nur das Verhalten ohne jede Gestaltung.
Component Library und Design System
Ein Design System umfasst mehr: Gestaltungsregeln, Tonalität, Vorlagen und die Begründung, warum etwas so aussieht. Die Component Library ist der Teil davon, der im Code steckt.
Große Unternehmen bauen ihre eigene, kleinere Teams setzen auf eine fertige und passen sie über das Theme an.
Wann sich eine eigene Component Library lohnt
Wenn mehrere Anwendungen dieselben Bausteine brauchen und über Jahre gepflegt werden. Dann rechnet sich der Aufwand, weil eine Änderung an einer Stelle alle Projekte erreicht. Für eine einzelne Website reicht es fast immer, die Komponenten im Projekt selbst sauber anzulegen.