Meta has launched Astryx, an open supply design system that’s absolutely customizable and constructed to be operated by each individuals and the AI brokers working alongside them. It’s out there now in Beta. Astryx will not be a brand new experiment. It grew inside Meta during the last eight years, the place the corporate says it grew to become its most-used and largest design system, formed by the engineers, designers, and product groups who rely upon it day by day.
The system ships 150+ accessible elements (the docs website now lists 160+), brand-level theming, darkish mode, ready-to-ship templates, and a CLI as one cohesive bundle. It’s constructed on React and StyleX. You import pre-built CSS and use typed React elements. There isn’t a construct plugin to wire up and no styling library to undertake.
The trade-off Astryx is attempting to take away
Most design programs power a selection. Undertake a big firm’s system and your app tends to seem like another person’s product. Attain for copy-paste elements as a substitute and each undertaking forks its personal snippets, with no shared coherence, no upstream fixes, and accessibility quietly turning into your downside.
Astryx separates the 2 issues. The system controls conduct, accessibility, and high quality. Themes management the way it appears. You customise on the token degree (coloration, sort, radius, movement) so the app turns into unmistakably yours with out rewrites. A theme is just a set of CSS customized property overrides, so a designer can retheme Astryx with out forking or wrapping part supply.
Its said design ideas are steering over enforcement, robust documented conventions, one system for people and AI, and earned by measurement — conventions are examined, not asserted.
Structure: foundations, elements, patterns
Astryx is organized in three layers. Foundations are the primitives for cohesive, accessible interfaces: typography, coloration, format, and accessibility. Parts are the 150+ reusable constructing blocks, all with full TypeScript help. Patterns are battle-tested options for frequent workflows: desk pages, element layouts, type wizards, navigation, and data-entry flows.
Two design selections make it unusually open. Parts are composed at any degree reasonably than locked behind a closed top-level API, and swizzle can eject a part’s full supply into your undertaking when you’ll want to personal it. Styling is created with StyleX however stays invisible to customers, so you’ll be able to override with className utilizing Tailwind, CSS modules, or plain CSS — regardless of the undertaking already makes use of. The explainer beneath reveals how one set of elements restyles throughout Astryx’s seven shipped themes when solely the tokens change.
Interactive explainer
One system, many skins: how Astryx splits conduct from model
The elements beneath by no means change. Solely the tokens do. Choose a theme, drag the sliders, and watch the identical accessible React UI restyle with no rewrites.
8 yrsIn manufacturing
13,000+Apps at Meta
150+Parts
7Themes
MITLicense
React 19+ StyleX
1 · Select a theme
2 · Tune the tokens
New
Minimalist watch
Clear design, on a regular basis sturdiness.
$248
In inventory
Similar markup, similar conduct — restyled solely by CSS customized properties.
Beneath the hood · three layers
Constructed for brokers, not retrofitted for them
Meta frames Astryx as a response to how software program is now written. As extra code is produced by brokers, the argument goes, design programs need to be rethought reasonably than patched. The API, conventions, docs, and CLI have been designed collectively, so an individual and an AI assistant construct the identical means from the identical reference. Each change that made Astryx simpler for AI, the staff notes, made it simpler for individuals too.
That reveals up within the tooling. The CLI (@astryxdesign/cli) can checklist and scaffold templates, print full part docs, generate and construct themes, run codemods emigrate variations, and floor machine-readable docs from the command line or over MCP. Parts ship with constant naming, prop, and composition guidelines, so when you study a number of, each individuals and fashions can predict how an unfamiliar one behaves.
Necessities and easy methods to deploy it
As a result of Astryx is a front-end library, ‘deploying’ it means including it to a React app. The bundle (@astryxdesign/core, referred to internally as XDS) lists React and react-dom ≥ 19.0.0 as peer dependencies, alongside StyleX. It ships pre-built CSS, so there is no such thing as a PostCSS or Babel configuration so as to add. Supported setups embrace Subsequent.js with Tailwind, Subsequent.js with StyleX, Vite, and a no-build CDN path through the UMD bundle on unpkg or jsDelivr. The interactive checker beneath generates the precise set up and setup steps to your stack and flags something that should change first.
Is it deployable?
Ship Astryx in your stack: necessities, setup, and a go / no-go verdict
Astryx is a front-end design system, so “deploy” means dropping it right into a React app. Reply three questions and get the precise set up path, a necessities verify, and whether or not you're clear to ship.
Framework
React model
Bundle supervisor
Use case
Setup to your stack
Pre-built CSSNo PostCSS / Babel
Typed + tree-shakeableImport per part
Darkish modeInbuilt
CLI + MCPAgent-ready docs
Key takeaways
- Astryx is Meta's largest inside design system, now open supply beneath MIT.
- 150+ accessible React elements, seven themes, darkish mode, templates, and a CLI.
- Conduct and accessibility reside within the system; look lives in CSS-token themes.
- Constructed agent-first: one API, docs, and CLI (plus MCP) for people and AI alike.
- Requires React 19+; ships pre-built CSS with no construct plugin, and is at the moment Beta.
Sources: astryx.atmeta.com and github.com/fb/astryx
Michal Sutter is an information science skilled with a Grasp of Science in Knowledge Science from the College of Padova. With a stable basis in statistical evaluation, machine studying, and information engineering, Michal excels at remodeling complicated datasets into actionable insights.
