Astryx – Metas veröffentlichtes Open-Source-Designsystem

• Basiert auf React und StyleX und zeichnet sich durch vollständige Anpassbarkeit sowie Agenten-Unterstützung aus
• Bietet über 160 React-Komponenten mit Unterstützung für Barrierefreiheit und Brand-Themes und vereint Dark Mode, sofort einsetzbare Templates und eine CLI in einem integrierten System
• Ist intern bei Meta über die letzten 8 Jahre zum meistgenutzten und größten Designsystem gewachsen, treibt über 13.000 Apps an und wurde von Engineering-, Design- und Produktteams verfeinert
• Unterstützt mehrere Themes, die alle Design Tokens wie Farben, Abstände, Radius und Typografie als CSS Custom Properties bereitstellen
• Ermöglicht über die Kommandozeile oder MCP Projekt-Scaffolding, das Durchsuchen von Templates, Theme-Erstellung und das Bereitstellen von Dokumentation für Agenten und lässt sich so mit AI-Coding-Tools kombinieren
  • Wenn man die initialen Installationsanweisungen in ein AI-Coding-Tool einfügt, wird durch Ausführen von npx astryx init die Agenten-Dokumentation automatisch eingerichtet
• Offene Interna (Open internals): Komponenten sind nicht in einer geschlossenen Top-Level-API eingeschlossen, sondern auf jeder Ebene kombinierbar; benötigte Building Blocks werden direkt exportiert
  • Mit der Funktion swizzle kann der vollständige Quellcode einer Komponente ins Projekt extrahiert und selbst übernommen werden
• Kein Styling-Lock-in: Intern werden Styles mit StyleX geschrieben, was für Nutzer jedoch nicht sichtbar ist; Overrides sind über className mit Tailwind, CSS Modules oder Plain CSS möglich
• Prinzip Guidance over enforcement: statt Vorgaben zu erzwingen, werden Fähigkeiten bereitgestellt – übergebene Werte werden von Komponenten unverändert gerendert, Design-Meinungen stecken in Dokumentation und Beispielen
  • Alle Komponenten folgen denselben Namens-, Prop- und Kompositionsregeln und sind dokumentiert, sodass Menschen wie AI das Verhalten unbekannter Komponenten vorhersagen können
• Die CLI dient als Referenz für Komponenten, Tokens, Templates und Dokumentation
  • npx astryx component (Komponentenliste), npx astryx docs (Dokumentationsthemen), npx astryx template --list (Page Templates), npx astryx docs tokens (Referenz für Abstände/Farben/Radius)
• Architektur: Aufbau in 3 Schichten
  • Foundations: Building Blocks für visuelle Konsistenz wie Typografie, Farben, Layout und Barrierefreiheit
  • Components: Über 150 wiederverwendbare UI-Building-Blocks mit vollständiger TypeScript-Unterstützung
  • Patterns: Bewährte Designlösungen wie Tabellenseiten, Detailseiten-Layouts, Form-Wizards, Navigation und Dateneingabe-Flows
• Bietet Production-ready Templates, bei denen nur Inhalte eingefügt werden müssen, sowie vollständige Beispiel-Apps mit verbundenem Routing, Theme und Komponenten
• MIT-Lizenz