Meta open-sources Astryx, its agent-ready design system

Astryx is an open-source design system from Meta that has spent the last eight years powering more than 13,000 apps inside the company. Its defining angle is that it was built from the ground up for how software gets built today: by human engineers and AI coding agents working side by side.

Currently in Beta under the MIT license, Astryx runs on React 19 and StyleX. It ships with 150+ accessible components, brand-level theming, dark mode, production-ready layout templates, and a dedicated CLI.

What it does

Most enterprise design systems either lock developers behind rigid top-level APIs or force adoption of a heavy styling runtime. Astryx takes a different route.

While its components are authored with StyleX, that engine is invisible to end consumers. You import pre-built CSS files and use typed React components without configuring build plugins or Babel. You can override styles using Tailwind, CSS modules, or vanilla CSS through standard className props.

When a component needs deep customization, Astryx provides a swizzle command via its CLI. This ejects the component's raw source code directly into your local codebase so your team can own and modify it freely.

Themes operate entirely through CSS custom properties. Astryx includes seven built-in themes out of the box, including neutral, butter, chocolate, and matcha, letting teams rebrand without wrapping or forking upstream code.

Getting started and working with agents

Astryx requires React 19 or later as a peer dependency, alongside Node 22+ and pnpm 11 for local workspace development.

Setup is straightforward. You install @astryxdesign/core, a theme package like @astryxdesign/theme-neutral, and the stylex peer dependency, then wrap your root tree with the theme provider. No complex PostCSS setup is required.

The system was engineered so that AI assistants and human developers operate through the exact same tooling. By installing @astryxdesign/cli globally or locally, coding agents can query component docs, generate scaffolding, and run codemods reliably.

Every single component follows strict naming and prop conventions. According to Meta, making conventions predictable for AI agents naturally made the system far more intuitive for human developers.

Keep in mind that the project is still in Beta. Charting components remain under canary tags, and experimental lab components have not yet been published to the stable npm registry.

Why it matters

If you are starting a fresh project on React 19 or running an engineering workflow heavy on AI coding agents, Astryx is worth a close look. It translates Meta's battle-tested internal UI architecture into a modern format that treats AI tools as first-class citizens rather than an afterthought.

Compared to setups like shadcn/ui or MUI, Astryx offers an interesting middle ground: deep extensibility through swizzling combined with the structural discipline of an enterprise system. The catch is the strict React 19 requirement and an ecosystem that is just beginning its public life.