Meta Astryx Is Now Open Source: A React Design System Your AI Agent Can Actually Read

Meta open-sourced Astryx, the React design system it used to build more than 13,000 internal apps, and the project drew 10,600 GitHub stars in its first week. Astryx ships 150+ accessible React components, seven themes and StyleX compile-time styling under an MIT license, plus a CLI that emits a JSON manifest of every component, prop and default and an MCP server at https://astryx.atmeta.com/mcp that MCP-compatible coding tools can query in real time; `npx astryx init --features agents --agent claude` writes the component catalog into a project's CLAUDE.md, with the same command supporting Cursor and Codex. The library requires React 19 as a hard peer dependency, and the article frames the choice against shadcn/ui as Astryx for teams using AI agents versus shadcn for full code ownership.

Meta just open-sourced the design system it used to build 13,000+ internal apps, and it picked up 10,600 GitHub stars in a single week. That number is worth paying attention to: developers are not starring Astryx https://github.com/meta/astryx because Meta shipped another component library. They are starring it because it is the first design system built from day one so an AI coding agent can read it without guessing. The Agent-Ready Problem Nobody Solved Until Now If you have used Claude Code or Codex to build a UI, you have hit the same wall: the agent confidently passes props that do not exist, picks variants from memory, and produces components that look fine until runtime. The problem is not the model. It is that design system documentation lives in Storybook, and agents cannot navigate Storybook. They work from training data, which goes stale the moment a component API changes. Astryx solves this with two things. First, a CLI that ships a JSON manifest of every component, every prop, and every default, structured so an agent reads it like code, not prose. Second, an MCP server endpoint at https://astryx.atmeta.com/mcp that any MCP-compatible tool can query in real time. Wire it to Claude Code in one command: npx astryx init --features agents --agent claude That writes the component catalog directly into your CLAUDE.md . Your next Claude Code session knows every Astryx component before you type a word. The same command works for Cursor --agent cursor and Codex --agent codex . Full setup details are in the Working with AI docs https://astryx.atmeta.com/docs/working-with-ai . What You Get Astryx ships 150+ accessible React components, seven themes neutral, butter, chocolate, matcha, stone, gothic, y2k , dark mode, and production-ready page templates. Styling is handled by StyleX, Meta’s compile-time CSS-in-JS that outputs atomic, collision-free CSS at build time with zero runtime overhead. That is a meaningful upgrade over Emotion-based systems like MUI if bundle size and paint speed matter to your project. The MIT license and TypeScript-first API are table stakes in 2026. What is not table stakes: eight years of internal production use across Meta’s product portfolio. Astryx powered the company’s internal development before going public, which means the component APIs have been stress-tested at the kind of scale that breaks abstractions. Getting Started npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex npm install -D @astryxdesign/cli npx astryx init --features agents --agent claude Three commands. After that, import and use: js import { Button, Stack } from '@astryxdesign/core'; import '@astryxdesign/theme-neutral'; export function App { return <Stack gap={4} <Button variant="primary" Get started</Button </Stack ; } The getting started guide https://astryx.atmeta.com/docs/getting-started covers theme setup, token customization, and template scaffolding. Astryx vs. shadcn/ui The comparison people are making is against shadcn/ui, and the tradeoff is real. shadcn gives you full code ownership: components live in your repo, you can modify anything, and there is no npm dependency. That model works well if you are on React 18 and want to control every line. Astryx takes the opposite approach: it is an npm library, it pushes updates through versioning, and it handles accessibility and style consistency for you. The agent-readiness is where it pulls ahead. shadcn’s CLI is capable, but Astryx’s JSON manifest and live MCP server are a different tier of tooling. LogRocket’s side-by-side comparison https://blog.logrocket.com/astryx-vs-shadcn-meta-ai-react-claude/ puts it plainly: Astryx if you use AI agents; shadcn if you want full ownership. Both are legitimate choices. The Caveats Two things to know before migrating anything production-critical. First, React 19 is a hard requirement, a peer dependency, not a recommendation. If your project is on React 18, Astryx is not an option yet. Second, Astryx is still on 0.x releases. The team ships a codemod astryx upgrade --apply that handles most migration cases, but expect API churn before 1.0 stabilizes. For greenfield internal tools and dashboards on React 19, the tradeoffs are easy to accept. For public-facing production apps where a minor bump breaking a context shape costs you a release cycle, wait for 1.0. The 27,000-star momentum and Meta’s November 12 community event in San Francisco suggest a stable release is not far off.