linked-planet Blog
Ein UI-Kit, viele Umgebungen: Schneller bauen, einheitlich stylen
Warum ein UI-Kit: Die Erstellung von User Interfaces ohne vorgefertigte Komponenten ist wie Bauen ohne Bauklötze: Jeder Baustein muss zunächst von Hand geschnitzt werden, immer wieder neu, für jedes Bauwerk.
Genauso braucht jeder Button sein eigenes Styling, jedes Formular seine eigene Validierung, jede Tabelle ihr eigenes Verhalten. Das kostet Zeit, produziert Inkonsistenzen und führt dazu, dass Teams dieselben Probleme immer wieder neu lösen, mit unterschiedlichen Ergebnissen.
Der effizientere Weg? Eine Kiste mit fertigen Teilen, direkt „ready to use“. UI-Kits liefern genau das: Wiederverwendbare Komponenten, klare Gestaltungsregeln und etablierte Muster. Genau hier setzt unser Software Engineer Markus an. Mit einem eigenen UI-Kit hat er eine Toolbox erstellt, das ein notorisch nerviges Entwicklerproblem endlich aus der Welt schafft.
Was ist ein UI-Kit?
Ein User Interface Kit (UI-Kit) ist eine Sammlung vorgefertigter Bausteine zur Gestaltung von Benutzeroberflächen. Hierbei handelt es sich typischerweise um Komponenten wie Buttons, Textfelder, Tabellen oder Layout-Elemente, die in Anwendungen wiederverwendet werden können, ohne sie jedes Mal neu programmieren zu müssen. UI-Kits helfen Entwicklern und Designern, digitale Oberflächen schneller und konsistenter zu gestalten. Sie sorgen dafür, dass alle Elemente optisch zusammenpassen und erleichtern die Zusammenarbeit im Team.
Do it yourself: Eigene UI-Kits für komplette Gestaltungsfreiheit
Für Oberflächen, die sich in Jira oder Confluence einbinden, bietet Atlassian mit Atlaskit eine eigene UI-Komponentenbibliothek. Hierbei steht ein breiter, gut dokumentierter Komponenten-Katalog bereit, der eng an das Atlassian Design System gekoppelt ist. Das beschleunigt die Entwicklung und sorgt für konsistente Interaktionen und Optik. Diese stößt jedoch auf technologische Hürden: So funktioniert Atlaskit nach dem Prinzip „take it or leave it“. Die öffentliche API ist vergleichsweise eng, tiefere Erweiterungen oder Sonderfälle lassen sich nur schwer oder gar nicht abbilden. Zudem weist Atlaskit Styling-Inkonsistenzen beim Einsatz neuerer Atlassian-Komponenten in älteren Jira-Versionen auf. Das visuelle Ergebnis auf dem Frontend wirkt dadurch uneinheitlich, weil Komponenten bereits für ein aktualisiertes Design gebaut sind, während die Zielumgebung noch ein früheres Aussehen nutzt.
Damit Entwickler vollständige Kontrolle über Aussehen und Anwendung der Komponenten erhalten, ist hier die Nutzung eines eigenen UI-Kits sinnvoll. Das erkannte auch unser Kollege Markus und entwickelte eine eigene Komponenten-Bibliothek auf TypeScript/React-Basis. Sie bündelt wiederverwendbare, klar benannte Bausteine für Oberflächen, vor allem Formular- und Layout-Komponenten mit konsistenter Fehlerbehandlung. Neben den Komponenten stellt das Kit Utilities bereit (u. a. zur Geräte-Erkennung für responsives Verhalten). Das Design ist dabei theming-fähig: Erscheinungsbild und Farben passen sich je nach Umgebung an, innerhalb des Atlassian-Kontexts ebenso wie im eigenen Corporate-Branding. Technologisch setzt das UI-Kit auf Werkzeuge, die sich in der Frontend-Community etabliert haben. Das Theme wird als Tailwind-Konfiguration exportiert, sodass modernes Styling auch ohne direkte Nutzung einzelner UI-Kit-Komponenten möglich ist.
Die Vorteile des UI-Kits von linked-planet
Das UI-Kit von Markus vereinfacht die Arbeit an Benutzeroberflächen spürbar: Auch Kollegen ohne Frontend-Erfahrung finden sich schnell zurecht, weil typische Elemente wie Formulare sofort einsatzbereit sind und die Fehlerbehandlung bereits mitbringt. So entstehen Eingabemasken und Layouts ohne große Hürden und das Team spart Entwicklungszeit, da geprüfte Bausteine projektübergreifend wiederverwendet werden. Gleichzeitig bleibt das Erscheinungsbild konsistent: Verhalten und Styling sind einheitlich, statt in jedem Projekt neu entwickelt zu werden. Wo nötig, passt sich das UI-Kit per Theming an und fügt sich nahtlos in Jira/Confluence ein und läuft ebenso gut eigenständig, etwa in einer Web-App mit Corporate-Design. Damit ist es nicht auf das Atlassian-Umfeld begrenzt. Barrierefreiheit ist mit exponierten Rollen und Attributen, stimmigen Kontrasten und korrekt umgesetztem Screenreader-Verhalten von Beginn an mitgedacht. Für Entwicklung und Qualitätssicherung steht eine abgeschottete Showcase-Umgebung bereit, in der Komponenten dokumentiert, isoliert getestet und Fehler realitätsnah nachgestellt werden können.
Hinzu kommt die Offenheit des Projekts: Das UI-Kit steht unter der Apache-2.0-Lizenz und ist damit kostenlos nutzbar, anpassbar und sogar für kommerzielle Einsätze erlaubt.
linked-planet
Fazit: Individuelle UI-Kits für individuelle Benutzeroberflächen
Ein gut strukturiertes UI-Kit bietet nicht nur vorgefertigte Bausteine, sondern auch die Möglichkeit, diese effizient zu wiederverwenden und bei Bedarf flexibel anzupassen.
Manchmal jedoch, insbesondere bei Projekten mit speziellen Anforderungen, reicht ein fertiges UI-Kit nicht aus. Hier kommt der Punkt, an dem es sinnvoll wird, sich ein eigenes UI-Kit zu erstellen: Wenn die vorhandenen Optionen nicht die notwendige Flexibilität, Anpassbarkeit oder Integration bieten, kann das eigene Kit die bessere Lösung sein. Ein maßgeschneidertes UI-Kit gibt einem die volle Kontrolle über das Design, die Technik und die Wiederverwendbarkeit von Komponenten und ermöglicht es, eine einheitliche Benutzererfahrung auf allen Plattformen zu gewährleisten.
