Chakra UI ist eine Komponentenbibliothek für React, die Segun Adebayo 2019 veröffentlicht hat. Sie liefert fertige Bausteine wie Buttons, Formularfelder, Dialoge und Menüs, die von Haus aus mit Tastatur und Screenreader bedienbar sind.
- Chakra UI
Eine Bibliothek fertiger React-Komponenten, deren Gestaltung über Eigenschaften im Code gesteuert wird.
Beispiel: „Das Dashboard ist mit Chakra UI gebaut, die Dialoge lassen sich deshalb vollständig per Tastatur bedienen.“Verwandt: Component Library, der Oberbegriff für solche Sammlungen.
Wie Chakra UI gestaltet wird
Über sogenannte Style Props. Abstände, Farben und Größen stehen als Eigenschaften direkt an der Komponente, etwa padding oder bg für die Hintergrundfarbe. Die Werte kommen aus einem Theme, in dem Farben, Abstände und Schriften einmal festgelegt sind.
Damit ist Chakra UI näher an Tailwind CSS als an klassischen Komponenten-Frameworks: Die Bausteine haben eine zurückhaltende Grundoptik und werden erst über das Theme zur eigenen Marke.
Barrierefreiheit bei Chakra UI
Sie ist eingebaut. Ein Dialog fängt den Fokus, schließt mit der Escape-Taste und gibt den Fokus danach an das auslösende Element zurück; Menüs lassen sich mit den Pfeiltasten bedienen, und die nötigen ARIA-Attribute setzt die Bibliothek selbst.
Das nimmt viel Arbeit ab, ersetzt aber keine Prüfung. Texte, Kontraste und die Reihenfolge der Inhalte bleiben Aufgabe des Projekts.
Für wen Chakra UI passt
Für React-Anwendungen, in denen ein Team schnell eine bedienbare Oberfläche braucht und das Erscheinungsbild über ein Theme steuern will. Für eine Website mit wenig Interaktion ist eine Komponentenbibliothek für React dagegen meist mehr, als die Aufgabe verlangt.