- Published on
An Agent-Ready React Design System With 150+ Accessible Components, Seven Themes, and a CLI
- Authors
- Name
- DeepHorus
Meta has open-sourced Astryx, a design system built for both human developers and AI agents, now available in beta. The system, which grew internally at Meta over eight years, became the company's most-used and largest design system before its public release. Astryx aims to eliminate the trade-off between adopting a rigid corporate design system and managing fragmented, hand-crafted components.
Astryx ships with over 150 accessible components, seven themes, dark mode, ready-to-use templates, and a command-line interface (CLI). Built on React and StyleX, it offers pre-built CSS and typed React components without requiring any build plugins or additional styling libraries. The system separates behavior and accessibility from visual theming, allowing customization at the token levelācolor, typography, radius, motionāso apps maintain a unique identity without code rewrites.
The architecture is organized into three layers: foundations (primitives for typography, color, layout, accessibility), components (150+ reusable blocks with full TypeScript support), and patterns (battle-tested solutions for common workflows like table pages and form wizards). Key design decisions include composable components at any level, the ability to 'swizzle' and eject component source, and styling overrides via className using Tailwind, CSS modules, or plain CSS.
Meta frames Astryx as a response to the rise of AI-assisted coding, where agents generate increasing amounts of code. The API, conventions, documentation, and CLI were co-designed so that humans and AI assistants build the same way from identical references. The team notes that every change making Astryx easier for AI also made it easier for people.
The CLI (@astryxdesign/cli) supports listing and scaffolding templates, printing component docs, generating themes, running codemods for version migration, and surfacing machine-readable docs via command line or MCP. Components follow consistent naming, prop, and composition rules, enabling predictability for both people and models.
To deploy Astryx, developers add the @astryxdesign/core package to a React app, with React and react-dom as peer dependencies. The system's seven shipped themes demonstrate how changing only token values restyles the same accessible components. As Astryx moves beyond beta, its open-source nature and agent-ready design could influence how future design systems evolve for collaborative human-AI development.
