Neba UI
Eine React-Komponentenbibliothek für Anwendungsoberflächen. Schaltflächen, Eingabefelder, Menüs, Dialoge, Tabellen und Diagramme teilen sich denselben Satz Eigenschaften, kommen barrierefrei an und folgen dem Dunkelmodus ohne Theme-Datei.
Über dieses Projekt
Neba UI ist eine React-Komponentenbibliothek für Anwendungsoberflächen. Sie liefert, was ein echtes Produkt braucht — Schaltflächen und Formularfelder, Menüs und Dialoge, Tabellen und Tabs, Diagramme, Fortschritt und Benachrichtigungen — bereits gestaltet, bereits barrierefrei und bereits untereinander stimmig. Ein Bildschirm wird zusammengesetzt statt ein zweites Mal entworfen. Sie bringt außerdem mit, was die Oberfläche eines KI-Agenten braucht — eine Prompt-Eingabe, gestreamten Text, Tool-Aufrufe, Freigabeanfragen, einen Bereich für das Reasoning und eine Liste der Schritte — und ein A2UI-Renderer unter neba/a2ui setzt den Bildschirm, den ein Agent in JSON beschreibt, in Neba-Komponenten um.
Jede Komponente schöpft aus einem gemeinsamen Vokabular. Size, color, variant, density und elevation bedeuten überall dasselbe, also ist ein mittelgroßes Bedienelement auf jeder Komponente gleich hoch und die Primärfarbe überall dieselbe Farbe. Rollen, Beschriftungen, Fokusverwaltung und Tastaturbedienung stecken in den Komponenten, statt nachträglich angeschraubt zu sein, und der Dunkelmodus folgt dem System, ohne dass etwas geschrieben wird. Das Aussehen ist eine Designsprache und keine Themendatei: eine lichtdurchlässige Fläche mit haarfeiner Kante, eine einzige Bewegungssignatur und Schatten, um die man bitten muss.
Die Einrichtung ist ein Paket und eine Zeile CSS. Kein Provider an der Wurzel, kein Themenobjekt zum Zusammenbauen, keine Konfigurationsdatei. Das Paket ist reines ESM, bringt TypeScript-Deklarationen mit und lässt sich wirklich tree-shaken — jede Komponente wird zu ihrem eigenen Modul, eine importierte Schaltfläche kostet also ungefähr das, was eine Schaltfläche kostet. Es läuft auf React 18 oder 19 mit zwei Laufzeitabhängigkeiten; der A2UI-Renderer bringt drei eigene optionale Peer-Abhängigkeiten mit, die ein Projekt, das ihn nie importiert, auch nie auflöst. Jede Komponente ist mit lebenden Vorschauen statt mit Bildschirmfotos dokumentiert.
Funktionen
Dokumentationsseite
TypeScript-Typen
Mehrsprachig
Durch Tests geprüft
Barrierefrei gebaut
Dunkelmodus
Tree-shakebar