Meta Open-Sources Astryx: 8-Year Internal Design System for 13K Apps

Eight Years of Internal Production Use

Astryx is not a new project created for open source. Meta used it internally for eight years to support over 13,000 applications, iterating on more than 150 components in real production environments. The technology stack is React 19 and StyleX. The components are not demo code; buttons, forms, dark mode, and accessibility support all come from actual internal requirements. The project appeared on GitHub Trending with 863 new stars.

Unified Interface for Humans, Build Tools, and AI Agents

Previously, humans read documentation sites, build tools consumed configuration files, and AI agents had no dedicated entry point — they had to guess usage from web pages. Astryx consolidates component documentation, design tokens, page templates, theme tooling, and upgrade codemods into a single CLI. The official documentation states that the API called by AI agents and build tools is the same as the CLI.

Installation runs: npx @astryxdesign/cli init This command generates AGENTS.md or CLAUDE.md without any interactive prompts, so it can be handed directly to an agent for execution.

Styling with StyleX

Astryx uses StyleX for styling. Developers create style objects with stylex.create and pass them to components via the xstyle prop, eliminating className concatenation.

// Old approach: className string concatenation, styles in global CSS, overrides require priority management
<Button className="btn btn--primary">Submit</Button>

// New approach: stylex.create generates style object, xstyle receives the object
const styles = stylex.create({
  primary: { paddingBlock: 8, paddingInline: 16 }, // Compile-time transformation to atomic CSS
});
<Button xstyle={styles.primary}>Submit</Button>

The old approach relies on global CSS and className strings, where overrides must consider specificity. The new approach uses stylex.create to produce a style object that is compiled to atomic CSS at build time, and the xstyle prop applies it directly.

Why This Matters for Agent-Assisted Development

Astryx solves a problem deeper than providing a polished component library: it encodes component usage as a machine-readable interface so that humans and agents consume the exact same specification. For teams already using AI agents to build UIs, turning documentation, tokens, and command-line tooling into a machine-consumable API is more valuable than the components themselves.