Developers and AI assistants build interfaces with the same design system
Humans and AI assistants follow the same syntax and documentation when selecting components and changing themes. This open-source design system was refined over eight years of use in more than 13,000 internal apps at Meta. It is built on React 19 and StyleX, but users can override styles with existing CSS or Tailwind, allowing it to integrate naturally into current projects.
Structure grown within Meta
Astryx grew into the most widely used design system within Meta after eight years of internal use. It is currently released as a beta version, providing a unified system of over 150 accessibility-compliant components, dark mode, ready-to-deploy templates, and CLI tools. It uses pre-built CSS to provide typed React components without requiring build plugins or separate styling libraries. This structure allows developers and AI assistants to write code based on the same reference materials.
Unlocked customization
Components are designed to be combinable at any level, not locked into a top-level API. When deeper modifications are needed, the swizzle command allows you to bring the entire component source into your project and take direct ownership. Styling is written in StyleX but is invisible to users; you can override it with Tailwind, CSS modules, or plain CSS via className to suit your project. Themes are a set of CSS custom property overrides, so designers can apply brand-appropriate colors without forking or wrapping.
Installation and initial setup
React 19 or higher and react, react-dom are required. Install @astryxdesign/core, @astryxdesign/theme-neutral, and @stylexjs/stylex, and add @astryxdesign/cli as a development dependency. You only need to add a few lines of CSS imports and a theme provider, without PostCSS or Babel configuration. To stabilize CLI access, it is recommended to register the astryx command in the scripts of package.json. This is a recommendation to prevent path errors when AI assistants or new developers call the CLI directly.
Principles for humans and AI
Astryx prioritizes guidance over enforcement. Components provide capabilities rather than constraints, and design opinions are contained in documentation and examples. All components follow the same naming, prop, and composition rules and are documented in detail, so learning a few makes the rest predictable. The API, conventions, documentation, and CLI are designed together, so changes that benefit humans apply equally to AI. These conventions are verified by measurement rather than assertion, and are re-evaluated if new situations prove them wrong.
Pre-adoption checks
Since it is currently in the beta stage, caution is needed in production environments that require stability. @astryxdesign/lab is not published on npm, and chart-related packages (vega, charts) are only distributed with the @canary tag, meaning there is no stable version. It is released under the MIT license, allowing commercial use. It is suitable for teams where humans and AI must share the same workflow, especially for projects aligned with the React 19 ecosystem. If you want to ensure component consistency while maintaining your existing styling system, it is worth considering adoption.
