adobe/react-spectrum: Vier Bibliotheken zwischen Designsystem und Hooks
Eine Sammlung von Bibliotheken und Tools, die Ihnen dabei helfen, adaptive, zugängliche und zuverlässige Benutzererlebnisse zu schaffen.
Auf einen Blick
- Was ist das?
- React Spectrum liefert das fertige Spectrum-Designsystem, React Aria und React Stately das ungestylte Verhalten, Internationalized die Sprachunterstützung. Was die Aufteilung bedeutet und wo die README Lücken lässt.
- Für wen ist es gedacht?
- adobe/react-spectrum passt zu Teams, die Barrierefreiheit nach WAI-ARIA Authoring Practices nicht selbst nachbauen wollen und dafür eine fertige Komponentenbibliothek oder verhaltensstarke Hooks einsetzen können. Weniger geeignet ist der Einstieg über das Repository allein: Die README enthält keine Installationsbefehle, keine Node-Version und keine Liste der unterstützten Sprachen.
- Darf ich es kommerziell nutzen?
- Ja. Apache-2.0 ist eine freizügige Lizenz: Sie dürfen darauf aufbauende Software nutzen, verändern und verkaufen, solange Sie die Urheberrechts- und Lizenzhinweise beibehalten.
- Wird es noch gepflegt?
- Ja. Die letzten Commits kamen vor 1 Tag.
- In welcher Sprache ist es geschrieben?
- Hauptsächlich TypeScript, laut der Sprachstatistik von GitHub.
Die Antworten beruhen auf den GitHub-Daten des Projekts (zuletzt abgeglichen am 15. September 2026) und auf unserer Analyse. Sie sind keine Rechtsberatung.
TIEFGEHENDE OPEN-SOURCE-ANALYSE
react-spectrum: vier Bibliotheken auf zwei Gestaltungsebenen
Das Repository adobe/react-spectrum ist eine Sammlung von Bibliotheken und Werkzeugen zum Bauen adaptiver, zugänglicher und robuster Benutzeroberflächen. Es ist in TypeScript geschrieben, steht unter Apache-2.0, verzeichnet 15.825 Sterne, 1.557 Forks und 593 offene Issues, der Standardzweig heißt main, als Projektseite ist react-spectrum.adobe.com eingetragen.
Vier Teile tragen das Ganze. React Spectrum ist die React-Umsetzung von Spectrum, dem Designsystem von Adobe. React Aria ist eine Sammlung ungestylter React-Komponenten und Hooks für zugängliche Oberflächen. React Stately ist eine Sammlung von Hooks für Zustandsverwaltung über Plattformen hinweg. Internationalized ist eine Sammlung framework-unabhängiger Bibliotheken für Internationalisierung im Web.
Die Aufteilung folgt einer einfachen Trennlinie: React Spectrum liefert Aussehen und Verhalten zusammen, React Aria und React Stately liefern Verhalten und Zustand ohne Aussehen. Wer ein eigenes Designsystem trägt, nimmt die zweite Ebene, wer ein fertiges sucht, die erste.
React Aria und React Stately: eigene DOM-Struktur mit fremden Hooks
React Aria wird im README als Sammlung ungestylter Komponenten und Hooks beschrieben, mit der sich zugängliche, hochwertige UI-Bausteine für die eigene Anwendung oder das eigene Designsystem bauen lassen. Der Verzicht auf Stil ist dabei keine Sparmaßnahme, sondern die Voraussetzung für den Einsatz in einem vorhandenen Design: Die Komponenten bringen Verhalten, Barrierefreiheit und Interaktion mit, während DOM-Struktur und Styling beim Anwender bleiben.
React Stately ergänzt das um Zustandsverwaltung. Die Hooks sind ausdrücklich plattformübergreifend gedacht und lassen sich auch unabhängig von React Aria verwenden, im README wird React Native als Beispiel genannt. Wer React Aria einsetzt, wird nach Angabe des README wahrscheinlich auch React Stately verwenden, zwingend ist die Kombination aber nicht.
Damit entsteht ein Baukasten mit wählbarem Umfang. Kleinste Einheit sind die Hooks, darüber liegen die ungestylten Komponenten von React Aria, und darüber die fertig gestalteten Komponenten von React Spectrum.
react-aria-components@1.20.0 und @react-spectrum/s2@1.6.0 im selben Repository
Die im Material geführten Veröffentlichungen zeigen, dass die Teile unabhängig versioniert werden. Am 31. Juli 2026 erschien react-aria-components@1.20.0, wenige Minuten zuvor @react-spectrum/s2@1.6.0, und am 18. Juni 2026 react-aria-components@1.19.0. Zwei Pakete mit eigenen Versionsnummern im selben Repository, veröffentlicht am selben Tag, sind das übliche Bild eines Monorepos mit getrennten Auslieferungen.
Für die Installation heißt das, dass das Paket zur gewählten Ebene passt: react-aria-components für die ungestylte Schicht, @react-spectrum/s2 für die Spectrum-2-Ausgabe des Designsystems. Beide Namen erscheinen so in den Veröffentlichungstiteln des Repositorys.
Eine Einschränkung verdient Erwähnung, weil sie den Einstieg betrifft: Die README selbst nennt keine Installationsbefehle. Sie verweist stattdessen auf eigene Einstiegsseiten für jede Bibliothek. Wer ein Projekt aufsetzen will, muss diese Seiten öffnen; im Repository-Kern stehen die Befehle nicht.
WAI-ARIA Authoring Practices 1.2: was die README zusichert
Die Funktionsliste beginnt mit der Barrierefreiheit. Verhalten und Zugänglichkeit seien nach den WAI-ARIA Authoring Practices umgesetzt, und zwar in der Ausgabe 1.2, einschließlich vollständiger Unterstützung für Screenreader und Tastaturnavigation. Alle Komponenten seien über eine breite Palette von Screenreadern und Geräten getestet, um das bestmögliche Erlebnis zu erreichen.
Das sind Zusicherungen des Projekts. Unabhängige Nachweise wie Testberichte oder eine Liste der geprüften Screenreader-Versionen enthält das Repository nicht; die README nennt weder konkrete Browser noch Geräte. Für Projekte mit verbindlichen Vorgaben zur Barrierefreiheit bleibt deshalb ein eigener Prüflauf nötig, statt sich auf die Formulierung zu verlassen.
Der zweite Punkt der Liste betrifft die Eingabe. Alle Komponenten seien für Maus, Touch und Tastatur ausgelegt und nach responsiven Prinzipien gebaut. Genau diese Kombination ist der Teil, der beim Eigenbau erfahrungsgemäß am meisten Arbeit macht, weil Zeiger- und Tastaturpfade getrennt bedacht werden müssen.
Über 30 Sprachen und das framework-unabhängige Internationalized-Paket
Die Internationalisierung ist als eigener Baustein ausgegliedert. Internationalized wird als Sammlung framework-unabhängiger Bibliotheken beschrieben, die sich also auch ohne React einsetzen lassen. Das README beziffert die mitgelieferte Sprachunterstützung auf über 30 Sprachen.
Zum Umfang gehören Rechts-nach-links-Sprachen sowie Datums- und Zahlenformatierung, ergänzt durch weitere Punkte, die die Aufzählung mit einem mehr offenlässt. Welche Sprachen das im einzelnen sind, listet das README nicht auf; diese Angabe steht in der Dokumentation des Internationalized-Pakets.
Dass dieser Teil framework-unabhängig ausgelegt ist, zahlt sich über React hinaus aus. Formatierungsregeln sind die Schicht, die sich am seltensten ändern und am aufwendigsten selbst zu pflegen sind. Wer bereits eine Formatierungsbibliothek einsetzt, sollte prüfen, ob ein zweiter Satz Regeln entsteht, der von den vorhandenen abweicht.
rfcs/2019-v3-architecture.md und CONTRIBUTING.md im react-spectrum-Repository
Zwei Dokumente im Repository erklären das Zusammenspiel. Die Architektur-RFC unter rfcs/2019-v3-architecture.md beschreibt, wie die Teile ineinandergreifen; das README verweist ausdrücklich darauf, sowohl im Abschnitt zu den ersten Schritten als auch im Abschnitt zu Beiträgen. Für alle, die verstehen wollen, warum Verhalten und Darstellung getrennt wurden, ist das die maßgebliche Quelle.
Der Leitfaden für Mitwirkende liegt unter CONTRIBUTING.md. Das formulierte Ziel des Projekts lautet, das Bauen von Designsystemen und Komponentenbibliotheken möglichst einfach zu machen und dabei hochwertige Interaktionen und Barrierefreiheit zu halten. Beiträge jeder Größe sind ausdrücklich willkommen.
Zur Einordnung des Unterbaus: 593 offene Issues bei 15.825 Sternen sind für ein Projekt dieser Größe normal, bedeuten aber, dass einzelne Korrekturen auf sich warten lassen können. Der letzte im Material verzeichnete Stand im Zweig main stammt vom 31. Juli 2026.
React Spectrum oder React Aria: welche Ebene zum Projekt passt
Die Wahl zwischen den beiden Ebenen ist die wichtigste Entscheidung beim Einstieg, und das README formuliert sie als Wenn-Dann. React Spectrum ist die Wahl für alle, die in Adobe-Software integrieren oder eine vollständige Komponentenbibliothek für ihr Projekt wollen. React Aria ist der Einstieg für alle, die eine Komponentenbibliothek für das Web von Grund auf mit eigenem Styling bauen.
Der Unterschied liegt im Grad der Festlegung. React Spectrum bringt das Spectrum-Design mit und unterstützt eigene Themes sowie die automatische Anpassung an den Dunkelmodus. React Aria legt das Aussehen nicht fest und verlangt dafür, dass DOM-Struktur und Styling selbst geschrieben werden.
Als dritte Möglichkeit nennt das README den Mittelweg: Eigene Komponenten mit eigener DOM-Struktur und eigenem Styling bauen und dabei die Hooks von React Aria und React Stately für Verhalten, Barrierefreiheit und Interaktion nutzen. Genau dafür ist die Trennung der vier Teile angelegt.
Für wen sich adobe/react-spectrum lohnt
Sinnvoll ist der Einsatz überall dort, wo Barrierefreiheit und Eingabevarianten nicht noch einmal erfunden werden sollen. Die Zusicherung, Tastatur, Zeiger und Screenreader zusammen zu bedienen, deckt den Teil ab, der in Eigenentwicklungen am häufigsten unvollständig bleibt.
Weniger sinnvoll ist der Einstieg über das Repository allein. Ohne Installationsbefehle, ohne genannte Node-Version und ohne Liste der unterstützten Sprachen bleibt als erster Schritt nur die Dokumentationsseite react-spectrum.adobe.com. Wer eine verbindliche Aussage zum Support-Umfang braucht, findet sie in den Paketdokumenten, nicht in der README.
Der konkrete Prüfpfad ist damit kurz: Erst die Ebene wählen, also React Spectrum für ein fertiges Designsystem oder React Aria und React Stately für ein eigenes. Danach das zugehörige Paket in der im Repository veröffentlichten Version einbinden, also react-aria-components in 1.20.0 oder @react-spectrum/s2 in 1.6.0, und die Barrierefreiheit mit dem eigenen Screenreader nachprüfen, statt sie aus der Funktionsliste zu übernehmen.
Redaktionelles Fazit
adobe/react-spectrum passt zu Teams, die Barrierefreiheit nach WAI-ARIA Authoring Practices nicht selbst nachbauen wollen und dafür eine fertige Komponentenbibliothek oder verhaltensstarke Hooks einsetzen können. Weniger geeignet ist der Einstieg über das Repository allein: Die README enthält keine Installationsbefehle, keine Node-Version und keine Liste der unterstützten Sprachen. Vor der Entscheidung sollte geklärt werden, ob die Oberfläche dem Spectrum-Design folgen soll, dann ist React Spectrum die Wahl, oder ob eigene DOM-Struktur und eigenes Styling gesetzt sind, dann führen React Aria und React Stately zum Ziel. Anschließend lohnt der Blick in rfcs/2019-v3-architecture.md, weil dort die Aufteilung der vier Teile begründet wird.
Community-Notizen