Meta has launched Astryx, an open supply design system that’s totally customizable and constructed to be operated by each folks and the AI brokers working alongside them. It’s obtainable now in Beta. Astryx is just not a brand new experiment. It grew inside Meta over the past eight years, the place the corporate says it turned its most-used and largest design system, formed by the engineers, designers, and product groups who rely on it day by day.
The system ships 150+ accessible parts (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 parts. There isn’t any construct plugin to wire up and no styling library to undertake.
The trade-off Astryx is making an attempt to take away
Most design methods power a alternative. Undertake a big firm’s system and your app tends to seem like another person’s product. Attain for copy-paste parts as an alternative and each venture forks its personal snippets, with no shared coherence, no upstream fixes, and accessibility quietly changing into your drawback.
Astryx separates the 2 issues. The system controls habits, accessibility, and high quality. Themes management the way it seems. You customise on the token degree (colour, kind, radius, movement) so the app turns into unmistakably yours with out rewrites. A theme is solely a set of CSS customized property overrides, so a designer can retheme Astryx with out forking or wrapping element supply.
Its said design rules are steerage over enforcement, robust documented conventions, one system for people and AI, and earned by measurement — conventions are examined, not asserted.
Structure: foundations, parts, patterns
Astryx is organized in three layers. Foundations are the primitives for cohesive, accessible interfaces: typography, colour, format, and accessibility. Elements are the 150+ reusable constructing blocks, all with full TypeScript help. Patterns are battle-tested options for widespread workflows: desk pages, element layouts, kind wizards, navigation, and data-entry flows.
Two design selections make it unusually open. Elements are composed at any degree slightly than locked behind a closed top-level API, and swizzle can eject a element’s full supply into your venture when it’s worthwhile to personal it. Styling is created with StyleX however stays invisible to shoppers, so you may override with className utilizing Tailwind, CSS modules, or plain CSS — regardless of the venture already makes use of. The explainer under reveals how one set of parts restyles throughout Astryx’s seven shipped themes when solely the tokens change.
Interactive explainer
One system, many skins: how Astryx splits habits from model
The parts under 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+Elements
7Themes
MITLicense
React 19+ StyleX
1 · Select a theme
2 · Tune the tokens
New
Similar markup, similar habits — restyled solely by way of 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 methods need to be rethought slightly 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 workforce notes, made it simpler for folks too.
That reveals up within the tooling. The CLI (@astryxdesign/cli) can checklist and scaffold templates, print full element docs, generate and construct themes, run codemods emigrate variations, and floor machine-readable docs from the command line or over MCP. Elements ship with constant naming, prop, and composition guidelines, so when you study a couple of, each folks and fashions can predict how an unfamiliar one behaves.
Necessities and tips on how 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 isn't a PostCSS or Babel configuration so as to add. Supported setups embody 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 under generates the precise set up and setup steps on 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 test, and whether or not you might be clear to ship.
Framework
React model
Package deal supervisor
Use case
Setup on your stack
Pre-built CSSNo PostCSS / Babel
Typed + tree-shakeableImport per element
Darkish modeIn-built
CLI + MCPAgent-ready docs
Key takeaways
- Astryx is Meta's largest inside design system, now open supply below MIT.
- 150+ accessible React parts, seven themes, darkish mode, templates, and a CLI.
- Conduct and accessibility dwell 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 presently Beta.
Sources: astryx.atmeta.com and github.com/facebook/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 knowledge engineering, Michal excels at remodeling complicated datasets into actionable insights.
design-system-with-150-accessible-components-seven-themes-and-a-cli/">Supply hyperlink
