facebook/astryx

Astryx is a design system that ships 150+ accessible React components with brand-level theming, dark mode, and templates as a cohesive system built on React 19 and StyleX.

The tool solves the problem of building consistent interfaces across large numbers of applications while accommodating both human developers and AI assistants. It grew inside a large organization over eight years, powering thousands of applications shaped by engineers, designers, and product teams. Rather than locking components behind a closed API, Astryx exports its building blocks directly for composition at any level, and includes a swizzle feature that ejects a component's full source into your project when you need deeper customization. Styling is authored in StyleX but remains invisible to consumers, who can override with className using Tailwind, CSS modules, or plain CSS. Theming works through CSS custom property overrides, letting designers customize the appearance without forking component source or wrapping components.

Astryx suits teams building multiple applications who want a shared design language without styling lock-in or complex build configuration. The setup requires only CSS imports and a theme provider with no build plugin, PostCSS, or Babel configuration needed. It works with Next.js, Vite, and other frameworks. The tool includes a CLI for component documentation, templates, scaffolding, and codemods, designed so that both people and AI assistants use the same reference and tooling. Seven ready-made themes are provided as starting points for customization.

The project receives issue reports primarily from outside users rather than the core team, indicating a substantial base of adopters using it in production. Maintainers typically respond to new issues and pull requests within a day. Work in the issue tracker centers on enhancements, bug fixes, and component-related tasks.