Meta Open-Sources Astryx: An Agent-Ready React System with 150+ Accessible Components, Seven Themes, and a CLI.
Meta released Astryx, an open source design system that is fully customizable and built for use by both humans and the AI agents working around them. Now available in Beta. Astryx is not a new experiment. It grew within Meta over the past eight years, when the company says it became its most widely used and largest design system, built by engineers, designers, and product teams that depend on it every day.
The program is running 150+ parts accessible (docs site now includes 160+), product-level content, dark mode, ready-to-deploy templates, and CLI as one compact package. Built on React and StyleX. You import pre-built CSS and use typed React components. No build plugin can be wired and no style library can be downloaded.
Commercial Astryx tries to remove
Most design systems force a choice. Use a large company’s system and your application often looks like someone else’s product. Access the copy-paste components instead and the whole project forks its own snapshot, without shared interfaces, no upstream maintenance, and accessibility becomes your silent problem.
Astryx separates these two problems. The system controls behavior, accessibility, and quality. Themes control how it looks. You customize at the token level (color, type, radius, motion) so that the app is uniquely yours without rewriting. A theme is simply a set of custom CSS properties, so a designer can redesign Astryx without source forking or wrapping.
Its stated design principles are guidance over coercion, strong written agreements, one system for humans and AIagain achieved by measurement – agreements are checked, not guaranteed.
Structures: basics, components, patterns
Astryx is organized into three categories. The basics they are the first elements of cohesive, accessible communication: typography, color, structure, and accessibility. Parts are 150+ reusable building blocks, all with full TypeScript support. Patterns are battle-tested solutions for common workflows: spreadsheets, data structures, form wizards, navigation, and data entry flows.
Two design decisions make it exceptionally open. Components are built at any level rather than locked behind a closed high-level API, too swizzle it can extract the full source of a component from your project if you need to own it. A style is created with StyleX but remains invisible to consumers, so you can overwrite it className using Tailwind, CSS modules, or plain CSS – even if the project already uses it. The illustration below shows how one set of components repeats the styles for all seven Astryx shipped themes when changing only the tokens.
An interactive descriptor
One system, many skins: how Astryx separates behavior from the product
The parts below do not change. Only tokens do. Choose a theme, drag sliders, and watch the same accessible React UI restyle without rewriting.
8 yearsIn production
13,000+Apps on Meta
150+Parts
7Themes
MITLicense
Reaction 19+ StyleX
1 · Select a theme
2 · Clear tokens
New
A small watch
Clean design, everyday durability.
$248
In stock
Same markup, same behavior - redone with custom CSS properties.
Under the hood · three layers
It's designed for agents, not repurposed
Meta Frames Astryx as an answer to how software is written now. As more code is generated by agents, the argument goes, design systems should be rethought rather than amended. The API, protocols, documentation, and CLI were designed together, so the human and the AI assistant build in the same way from the same reference. Every change that made Astryx easier on AI, the team notes, also made it easier on humans.
That is reflected in the use of tools. CLI (@astryxdesign/cli) can list and scaffold templates, print full component documentation, generate and build themes, use codemods to migrate versions, and generate machine-readable documentation from the command line or above. MCP. Parts are sent with rules for constant naming, prop, and composition, so once you learn a few, people and models can predict how the odd one behaves.
Requirements and how to use it
Because Astryx is a front-end library, 'mining' means adding it to a React application. Package (@astryxdesign/corereferred to internally as the XDS list). React and react-dom ≥ 19.0.0 as peer-to-peer, alongside StyleX. It ships pre-built CSS, so no PostCSS or Babel configuration to be added. Supported setups include Next.js with Tailwind, Next.js with StyleX, Vite, and the CDN method that is not built with the UMD bundle in unpkg or jsDelivr. The interactive explorer below generates specific installation and setup steps for your stack and flags anything that needs to be changed first.
Is it usable?
Deploy Astryx to your stack: requirements, setup, and the go/no-go decision
Astryx is a front-end design system, so “deploy” means deploying it to a React application. Answer three questions and find out how to apply, a requirements check, and whether you're ready to deploy.
The outline
Reaction version
Package manager
Use the case
Set up your stack
Pre-built CSSNo PostCSS / Babel
Typed + moving treeImport each part
Dark modeIt's built in
CLI + MCPAgent-friendly documents
Important takeaways
- Astryx is Meta's largest in-house design program, now open sourced under MIT.
- 150+ accessible React components, seven themes, dark mode, templates, and CLI.
- Ethics and accessibility remain in the program; appearance remains in CSS token themes.
- A pre-built agent: a single API, documentation, and CLI (and MCP) for humans and AI alike.
- Requires React 19+; ships pre-built CSS without a build plugin, and is currently in Beta.
Sources: astryx.atmeta.com and github.com/facebook/astryx
Michal Sutter is a data science expert with a Master of Science in Data Science from the University of Padova. With a strong foundation in statistical analysis, machine learning, and data engineering, Michal excels at turning complex data sets into actionable insights.
