Meta has officially open-sourced Astryx, its largest internal design system, marking a significant milestone for developers building with React AI library tools. After eight years in production and powering over 13,000 applications across Meta’s ecosystem, Astryx is now available under the MIT license — and it’s built from the ground up for the agentic era.
What Is Astryx?
Astryx is a comprehensive, production-grade React AI library design system that ships with 150+ accessible components (now 160+), seven pre-built themes, full dark mode support, ready-to-deploy templates, and a powerful CLI. Unlike typical design systems that force a trade-off between consistency and customization, Astryx separates behavior from brand identity.
The system controls accessibility, interaction patterns, and component quality. Themes control visual appearance through CSS custom properties. This means your application can look completely unique without rewriting a single component.
Built for AI Agents, Not Retrofitted
What makes Astryx stand out in the crowded meta open-source ecosystem is its agent-first architecture. As more software is written by AI coding agents, Meta recognized that design systems need to be co-designed for both humans and machines.
Every component follows consistent naming conventions, predictable prop patterns, and composable APIs. The CLI (@astryxdesign/cli) supports scaffolding, theme generation, codemods, and even MCP (Model Context Protocol) integration — allowing AI assistants to query component documentation and generate code from the same reference that human developers use.
“Every change that made Astryx easier for AI made it easier for people too.” — Meta Engineering Team
Three-Layer Architecture
| Layer | Purpose |
|---|---|
| Foundations | Typography, color, layout, and accessibility primitives |
| Components | 150+ reusable, TypeScript-typed React building blocks |
| Patterns | Battle-tested solutions for tables, forms, wizards, and navigation |
Components can be composed at any level, and the swizzle command lets you eject full component source into your project when you need complete ownership. Styling is handled via StyleX but remains invisible to consumers — override with Tailwind, CSS Modules, or plain CSS.
Deployability
Astryx requires React 19+ and ships pre-built CSS with zero PostCSS or Babel configuration. Supported stacks include:
- Next.js + Tailwind
- Next.js + StyleX
- Vite
- CDN via UMD bundle (unpkg / jsDelivr)
Key Takeaways
- Meta open-source project under MIT license
- 150+ accessible React components with full TypeScript support
- 7 themes, dark mode, and brand-level token customization
- Agent-ready CLI with MCP support
- 8 years of production validation across 13,000+ apps
- Currently in Beta
Sources: astryx.atmeta.com | github.com/facebook/astryx
