Meta Open-Sources Astryx: An Agent-Ready React Design System With 150+ Accessible Components, Seven Themes, and a CLI

Meta has launched Astryx, an open supply design system that’s absolutely customizable and constructed to be operated by each folks and the AI brokers working alongside them. It is offered now in Beta. Astryx will not be a new experiment. It grew inside Meta during the last 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 web site now lists 160+), brand-level theming, darkish mode, ready-to-ship templates, and a CLI as one cohesive bundle. It is 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 attempting to take away

Most design programs pressure a selection. Adopt a massive firm’s system and your app tends to seem like another person’s product. Reach for copy-paste parts as a substitute and each undertaking forks its personal snippets, with no shared coherence, no upstream fixes, and accessibility quietly changing into your downside.

Astryx separates the 2 considerations. 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 solely a set of CSS customized property overrides, so a designer can retheme Astryx with out forking or wrapping element supply.

Its acknowledged design rules are steering over enforcement, robust documented conventions, one system for people and AI, and earned by measurement — conventions are examined, not asserted.

Architecture: foundations, parts, patterns

Astryx is organized in three layers. Foundations are the primitives for cohesive, accessible interfaces: typography, coloration, structure, and accessibility. Components are the 150+ reusable constructing blocks, all with full TypeScript help. Patterns are battle-tested options for widespread workflows: desk pages, element layouts, type wizards, navigation, and data-entry flows.

Two design selections make it unusually open. Components 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 undertaking when you could personal it. Styling is created with StyleX however stays invisible to shoppers, 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 exhibits how one set of parts restyles throughout Astryx’s seven shipped themes when solely the tokens change.

Built 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 must be rethought slightly than patched. The API, conventions, docs, and CLI had been designed collectively, so a individual and an AI assistant construct the identical approach from the identical reference. Every change that made Astryx simpler for AI, the group notes, made it simpler for folks too.

That exhibits 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. Components ship with constant naming, prop, and composition guidelines, so when you be taught a few, each folks and fashions can predict how an unfamiliar one behaves.

Requirements and methods to deploy it

Because 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 embrace Next.js with Tailwind, Next.js with StyleX, Vite, and a no-build CDN path by way of 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.