Meta Open-Sources Astryx, Its Agent-Ready React Design System

Meta recently announced the beta release of Astryx, an open-source React design system developed internally over eight years. Astryx builds on React 19 and StyleX to provide over 150 accessible UI components, customizable CSS design tokens, and dedicated CLI and MCP tooling — for both engineers and AI agents.

Meta’s design system decouples behavior and accessibility compliance from aesthetic representation. The latter is specified by means of a centralized design token layer (e.g., color palettes, typographical hierarchies, border radii).

Under the hood, Astryx authors its components’ styles using StyleX, Meta’s build-time CSS-in-JS compiler that outputs deterministic, collision-free atomic CSS. Components accept an xstyle property for compile-time typed StyleX styling:

import * as stylex from '@stylexjs/stylex';

const overrides = stylex.create({
  card: { maxWidth: 400, marginBlock: 16 },
  saveButton: { alignSelf: 'flex-end' },
});

<Card xstyle={overrides.card} />
<Button label="Save" xstyle={overrides.saveButton} />

The core package, @astryxdesign/core, distributes pre-compiled CSS files alongside typed React components. Components also maintain native className support so teams can interoperate seamlessly with Tailwind, CSS Modules, or vanilla stylesheets:

<Card className="shadow-lg hover:shadow-xl transition-shadow">
  ...
</Card>
<Button label="Save" className="my-app-save-btn" />

Using pre-compiled CSS and className does not require additional compiler setup.

Astryx’s CLI exposes a swizzle command that allows developers to eject a component’s full source code into their repository. Design tokens and related classes enable developers to customize a component’s appearance. Standard React compositional patterns let developers customize a single component’s behavior or the behavior of every instance of a component (e.g., component wrapper pattern). Code ejection may, however, be required for those cases where customization requires access to an unexposed internal implementation (e.g., private state, DOM structure, or inaccessible event listeners). While ejecting offers enhanced customization flexibility, it also means that developers now own the code and with it, the associated maintenance duty.

Astryx claims native support for AI workflows through its CLI (@astryxdesign/cli) and an MCP endpoint.

Some developers on Reddit expressed concerns regarding the long-term maintenance and governance of a Meta-sponsored framework. Other developers have already begun porting the token architecture and component specifications to alternative UI runtimes, e.g., Svelte 5 and Flutter.

Astryx is distributed under the MIT license and requires React 19 or later.