Meta has released Astryx, its battle-tested internal React design system, engineered with an MCP server and token-optimized CLI so AI coding agents can natively build user interfaces without guesswork
On June 28, 2026, Meta launched Astryx, an open-source React design system under the MIT license (currently in public Beta). Developed over eight years within Meta’s internal infrastructure, the system powers approximately 13,000 internal applications, dashboards, and monitoring tools. It is built using React and StyleX (Meta’s compile-time CSS engine), with roughly 75% TypeScript coverage.
Astryx includes specific architectural features designed to interface natively with automated AI coding agents (such as Claude Code, Cursor, or GitHub Copilot), including a built-in MCP server. This open-standard protocol provides AI models with a structured API to programmatically discover components, query layout templates, and map configurations without text-scraping codebases.
The native astryx (or xds) CLI features a --dense flag that strips human-centric filler from component documentation to produce token-efficient payloads for LLM context windows. Executing npx astryx manifest --json outputs a structured JSON schema mapping every command, flag, and response format, allowing AI agents to ingest all system capabilities in a single payload. Furthermore, source files use extensive JSDoc annotations and composition hints to provide LLMs with explicit data on layout constraints and prop types, reducing code generation hallucinations.
To prevent layout bugs during recursive nesting, Astryx implements dynamic DOM padding adjustments that automatically recalibrate outer and inner spacing when padded elements like cards, forms, or toolbars are placed inside each other, preventing padding from accumulating or double-stacking.
The design system ships with over 150 layout templates, primitives, and accessible components configured across 10 built-in themes—including Default, Neutral, Butter, Matcha, Gothic, Brutalist, and Y2K. This theming is handled entirely via a CSS variable cascade, enabling multi-brand UI variations by overriding variable definitions without changing core component logic, while “swizzle” commands allow developers to extract a component’s raw source code directly into their local repository for low-level modifications.
