Design & UI-Komponenten

Was sind UI-Komponenten und Component Libraries?

UI-Komponenten sind wiederverwendbare Interface-Bausteine, vom Button über das Formularfeld bis zur Datentabelle. Eine Component Library bündelt solche Bausteine in einheitlichem Design und nimmt dir die schwierigen Details ab, etwa Tastaturnavigation in Dropdowns oder Fokus-Management in Dialogen. Zwei Modelle haben sich etabliert. Klassische Libraries wie PrimeVue installierst du als Paket-Abhängigkeit und beziehst Updates über den Paketmanager. shadcn/ui hat ein anderes Prinzip populär gemacht: Die Komponenten werden als Quellcode in dein Projekt kopiert, du besitzt und veränderst sie wie eigenen Code; shadcn-svelte überträgt diesen Ansatz auf Svelte. Davon abzugrenzen sind UI-Kits, also Design-Vorlagen für Werkzeuge wie Figma, und Icon-Sets, die das Bildvokabular eines Interfaces liefern.

Typische Einsatzszenarien

Produktoberfläche mit eigenem Design: Soll das Interface eine eigene Handschrift tragen, passt der Copy-Ansatz von shadcn/ui. Du kontrollierst Markup und Styles vollständig und kämpfst nicht gegen die CSS-Spezifität einer fremden Bibliothek an.

Admin-Bereiche und interne Tools: Hier zählen Datentabellen, Formulare und Diagramme mehr als Design-Individualität. Eine breite Library wie PrimeVue deckt diese Bausteine ab, sodass ein Dashboard in Tagen statt Wochen steht.

Dashboards mit verschiebbaren Elementen: Kacheln, die sich per Drag-and-drop anordnen und in der Größe ändern lassen, sind aufwendig selbst zu bauen. GridStack.js liefert genau dieses Rasterverhalten als eigenständige Bibliothek.

Einheitliche Icons im ganzen Produkt: Ein durchgängiges Icon-Set mit konsistenter Strichstärke wirkt ruhiger als ein Mix aus mehreren Quellen und erspart Nacharbeit beim Angleichen von Größen und Stilen.

Worauf es bei der Auswahl ankommt

Abhängigkeit oder Code-Besitz: Eine Paket-Library liefert Updates und Bugfixes über den Paketmanager, bricht aber bei Major-Versionen gelegentlich ihre API. Kopierte Komponenten musst du selbst pflegen, dafür bindet dich kein Release-Zyklus.

Framework-Bindung: Die meisten Libraries gehören zu einem Framework wie React, Vue oder Svelte. Prüfe neben der Verfügbarkeit für deinen Stack auch die Pflege des Projekts, erkennbar an Commit-Aktivität und dem Umgang mit offenen Issues.

Barrierefreiheit: Combobox, Datepicker und Dialog korrekt bedienbar zu machen gehört zu den schwersten Aufgaben im Frontend. Eine Library, die ARIA-Rollen und Tastatursteuerung mitbringt, erspart dir genau diese Arbeit. Verlasse dich dabei nicht auf das Label "accessible", sondern teste die Komponenten mit der Tastatur.

Lizenz: Viele Libraries stehen unter MIT-Lizenz, manche Anbieter verkaufen zusätzlich fertige Templates oder Premium-Blöcke. Bei Icon-Sets gehört der Blick in die Lizenzbedingungen vor den ersten Einsatz, vor allem bei kommerzieller Nutzung und Pflicht zur Namensnennung.

Häufige Fragen

Was ist der Unterschied zwischen UI-Kit und Component Library?

Ein UI-Kit ist eine Design-Vorlage für Werkzeuge wie Figma: Es liefert gezeichnete Komponenten für Entwürfe und Prototypen. Eine Component Library liefert dieselben Bausteine als lauffähigen Code für ein bestimmtes Framework. Viele Teams setzen beides als Paar ein, damit Entwurf und Umsetzung dieselben Bausteine sprechen.

Sind Component Libraries kostenlos?

Die meisten verbreiteten Libraries stehen unter MIT-Lizenz und sind auch kommerziell frei nutzbar, darunter shadcn/ui, shadcn-svelte und der Kern von PrimeVue. Geld kosten häufig Zusatzangebote wie fertige Seiten-Templates oder Premium-Blöcke. Bei Icon-Sets lohnt der Blick in die Lizenz, weil einzelne Sets eine Namensnennung verlangen.

Oben stehen über 40 Bibliotheken, Icon-Sets und Werkzeuge nebeneinander, jedes mit eigener Detailseite. Braucht dein Produkt ein eigenes Design, beginne beim Copy-Ansatz von shadcn/ui; für interne Tools mit vielen Tabellen führt der schnellere Weg über eine breite Library wie PrimeVue.