Meta Releases Astryx, an Open-Source React Design System Built for Human and AI Developers

Meta has released Astryx, an open-source React-based design system that is now in Beta. The system pairs StyleX styling with a CSS-variable theme cascade and includes a Command Line Interface (CLI) and Model Context Protocol (MCP) server for AI agents to scaffold and document user interfaces. Released under the MIT license, the codebase is written primarily in TypeScript and has been production-tested inside Meta for eight years, powering over 13,000 internal apps.

Built Inside Meta’s Monorepo Over Eight Years

The software was developed inside Meta’s central monorepo, where it grew to become the company’s largest and most frequently used design system. It currently powers more than 13,000 internal applications. The codebase is written primarily in TypeScript, which accounts for approximately three-quarters of the repository.

A design system serves as a standardized collection of reusable user interface (UI) components, styling definitions, and layout rules. In large organizations, developers often write duplicate code or design custom variants of basic interface elements like buttons, input fields, and navigations. A design system solves this by providing a single, consistent source of code that all engineering teams can reuse.

Astryx provides this consistency with over 90 React components documented in its GitHub repository, while Meta’s official documentation site lists over 150 accessible elements. The library includes pre-built templates for common web pages, such as dashboards, forms, and settings panels, which developers can populate with their own data.

Compile-Time Styling via StyleX and CSS-Variable Cascades

Astryx structures its styling engine around StyleX, Meta’s compile-time CSS-in-JS technology that was released to the public in late 2023. Traditional styling methods in React often evaluate CSS at runtime inside the browser, which can slow down page load speeds as the browser executes JavaScript to figure out how to style a page. StyleX works by processing styles during the build step, outputting optimized, static, atomic CSS classes instead.

To simplify project integration, Astryx ships pre-built CSS files directly to users. This eliminates the need for developers to install specialized compiler plugins, Babel configurations, or PostCSS build tools.

Themes are managed through a CSS custom property (variable) cascade. Rather than wrapping React components in complex logic or modifying the components’ source files, developers can override visual tokens like color, border-radius, typography, and motion directly in CSS. The release includes ten ready-made themes that can be customized at the token level.

The architecture also allows developers to bypass StyleX constraints entirely. Users can apply visual styling to components using third-party utility tools like Tailwind CSS, standard CSS modules, or plain CSS sheets via standard React className parameters.

Open Internals and Context-Aware Layout Spacing

Many standard UI libraries hide their internal structural components behind a rigid, top-level programming interface, preventing developers from customizing nested parts. Astryx uses an “open internals” pattern, exporting all basic primitives so developers can compose and rearrange elements at any level of nesting.

If a team requires complete ownership over a component, the library supports a “swizzle” process. Running this command ejects the full, raw source code of an individual component directly into the local project directory. This transfers the code to the developer’s ownership, allowing for deep customization without breaking the remaining dependency tree.

The system also resolves a common layout bug where adjacent components duplicate their margins or padding, breaking visual alignments. Astryx includes context-aware spacing compensation. Layout wrappers automatically detect adjacent components and adjust whitespace calculations, removing the need for manual spacing overrides.

Standardizing AI Integration via JSDocs and MCP

While design systems are historically written for humans to read, the growth of automated coding tools has changed how code is generated. When AI agents generate interfaces, they frequently invent fake component APIs or style properties because they lack direct, structured access to a design system’s code and instructions.

To address this, Astryx embeds structured JSDoc annotations directly into its component files. These annotations contain composition hints that teach LLMs exactly which components are valid within a layout and how they are meant to nest.

The library includes a Model Context Protocol (MCP) server alongside its Command Line Interface (CLI). MCP is an open-standard protocol that allows AI models to safely query local developer workspaces and systems. Using this server, AI coding assistants can directly fetch structured documentation, browse templates, scaffold entire projects, and generate customized themes without scraping external websites.

Installation and Workspace Integration Steps

Developers can configure Astryx by downloading the core package, a base theme, and the companion CLI. The setup works across standard package managers.

The package installation process utilizes standard terminal commands:

# Using npm
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

# Using pnpm
pnpm add @astryxdesign/core @astryxdesign/theme-neutral
pnpm add -D @astryxdesign/cli

# Using yarn
yarn add @astryxdesign/core @astryxdesign/theme-neutral
yarn add -D @astryxdesign/cli

To ensure AI assistants or newly onboarded developers can interact with the tooling without facing path errors, developers can run the CLI through a dedicated script command:

npm run astryx -- component --list