# Astryx: Meta’s Open‑Source Design System Now in Beta
Meta has released **Astryx**, an open‑source design system built for both human teams and AI agents. After eight years of internal use, Astryx is now available in Beta as a fully customizable, large‑scale solution that bridges the gap between consistency and brand ownership.
—
## The Trade‑off Astryx Aims to Remove
Most design systems force a compromise: either you adopt a company‑wide system that makes your product look generic, or you assemble UI from copy‑pasted snippets that lead to inconsistency and unmanaged accessibility debt.
Astryx separates **behavior** from **branding**:
– System controls behavior, accessibility, and quality.
– Themes control appearance via token overrides.
– Designers and engineers can retheme at the token level without rewriting components or forking code.
Its core principles include:
– Guidance over enforcement
– Strong documented conventions
– One system for both humans and AI
– Conventions validated by measurement, not assertion
—
## Architecture: Foundations, Components, Patterns
Astryx is organized into three layers:
1. **Foundations**: Typography, color, layout, and accessibility primitives.
2. **Components**: 150+ reusable, fully typed React components.
3. **Patterns**: Battle‑tested solutions for table pages, detail layouts, form wizards, navigation, and data‑entry flows.
Two key design decisions increase openness:
– Components can be composed at any level.
– `swizzle` allows ejecting a component’s full source into your project.
Styling uses StyleX under the hood but remains invisible to consumers—overrides can be done with `className`, Tailwind, CSS modules, or plain CSS.
—
## Built for Agents, Not Retrofitted for Them
Astryx is framed as a response to modern software development where AI agents write increasing amounts of code. The system is designed so that both humans and AI use the same API, docs, and CLI. Improvements that help AI agents also make life easier for people.
The CLI (`@astryxdesign/cli`) supports:
– Listing and scaffolding templates
– Printing component documentation
– Generating and building themes
– Running codemods for version migration
– Exposing machine‑readable docs via MCP
—
## Requirements and Deployment
Because Astryx is a front‑end library, “deploying” means adding it to your React app.
**Requirements:**
– React and react‑dom ≥ 19.0.0
– StyleX
**Installation:**
– Package: `@astryxdesign/core` (referred to as XDS internally)
– No PostCSS or Babel configuration required
– Ships pre‑built CSS
**Supported setups:**
– Next.js with Tailwind
– Next.js with StyleX
– Vite
– No‑build CDN options (UMD bundle on unpkg or jsDelivr)
An interactive deployability checker generates exact install steps for your stack and flags any required changes.
—
## Key Takeaways
– Astryx is Meta’s largest internal design system, now open source under MIT.
– Includes 150+ accessible React components, seven themes, dark mode, templates, and a CLI.
– Behavior and accessibility are system‑level; look is handled by CSS‑token themes.
– Built with agent‑first principles: one API, docs, CLI, and MCP support.
– Requires React 19+; ships pre‑built CSS with no build plugin; currently Beta.
—
## FAQ
**What is Astryx?**
Astryx is an open‑source design system from Meta that provides reusable React components, theming, and tooling for both human teams and AI agents.
**Is Astryx free to use?**
Yes. It is released under the MIT license.
**What frameworks does Astryx support?**
It works with React 19+ and fits into setups like Next.js (with or without Tailwind), Vite, and CDN-based projects.
**Do I need a build step?**
No. Astryx ships pre‑built CSS and does not require PostCSS or Babel.
**How does theming work?**
Themes are defined by CSS custom property overrides, allowing designers to change the look without modifying component source or forking.
**What does “built for agents” mean?**
The API, documentation, CLI, and component conventions are designed so that AI assistants can interact with them the same way humans do.
**What are Patterns in Astryx?**
Patterns are higher‑level, reusable solutions for common workflows such as table pages, form wizards, and navigation flows.
—
## Conclusion
Astryx represents a mature, production‑tested approach to design systems that scales from component libraries to enterprise‑level applications. By separating behavior from presentation and embracing agent‑centric tooling, it offers teams a path to consistent, accessible, and truly customizable UIs without sacrificing developer experience. If you’re using React 19+ and want a design system that works as hard for your AI tools as it does for your engineers, Astryx is worth exploring.
*Sources: astryx.atmeta.com and github.com/facebook/astryx*
