Meta Astryx: The Open-Source Design System Built for People and AI Agents

Meta has open-sourced Astryx, an MIT-licensed React design system with 150+ components, seven themes and a command-line tool that coding agents can read. The repository, meta/astryx, had about 14,100 stars when we checked on November 7, 2026, and gained roughly 200 in one day. Meta labels it beta.

The pitch is simple. The README calls Astryx "an open source design system that's fully customizable and built for how we build now," and has a section titled "Built for people and agents." That makes it one of the first big-company design systems that treats an AI coding agent as a first-class user.

TL;DR: the questions people ask first

What Astryx is, in plain words

A design system is a shared set of buttons, tables, forms, colors and spacing rules, so every screen in a product looks and behaves the same. Astryx is Meta's version of that, now public.

The README says it grew inside Meta over about eight years and is described there as the company's most-used and largest design system, powering more than 13,000 apps. That is Meta's own claim, and we could not check it independently. It does explain why the library is large: it has 150+ components, plus foundations (typography, color, layout, accessibility) and patterns for table pages, detail pages, form wizards, navigation and data entry.

Astryx design system component grid concept showing reusable React building blocks

The codebase uses React 19, StyleX, TypeScript, Storybook for component docs, and Vitest and Playwright for tests. The repository showed 6,848 commits, 1.2k forks and MIT as the license on the day we read it.

How does Astryx work with AI agents?

This is the angle that makes the project newsworthy. The README lists "shared tooling for people and AI" as a core principle: "The API, docs, and CLI are designed so developers and AI assistants work from the same reference."

In practice, that means three things:

1. A CLI that prints docs. Commands such as astryx component --list and astryx docs global give an agent a plain-text reference it can call, instead of guessing component names from training data.
2. Agent instruction files in the repo. The repository includes AGENTS.md, CLAUDE.md and a .claude directory. If you have not used these files, see our guides to AGENTS.md support in Claude Code and what CLAUDE.md does.
3. Codemods, templates and scaffolding. The CLI covers component docs, templates, scaffolding, themes and codemods, so an agent can generate a page from a template and then refine it.

The README also says a global CLI install lets astryx run in any folder and that coding agents will know Astryx. We read that as a design goal, not a tested result. We did not run an agent against it for this post, so treat "agent ready" as Meta's description until you test it on your own tasks.

Why this matters for AI-generated UI

Agents write UI badly when they have to invent it. They pick random spacing, mix libraries and produce screens that look like three different products. Giving them a design system with a queryable reference is the fix several teams are now trying. We have covered other approaches: DESIGN.md as a spec for AI design systems, Vercel's spec-driven DESIGN.md push, Figma Specs for agents, and the community Solid Glass system on shadcn/ui.

Astryx takes a different route from those. DESIGN.md is a text spec the agent reads. Astryx is a real component library plus a CLI the agent can query. If you want an agent to produce screens that run, the second approach gives it working parts.

How do I install Astryx?

The README gives these commands. We list them as published; we did not run them for this post.

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli

pnpm and yarn equivalents are in the README. Astryx needs React 19 or later. You can also install the CLI globally:

npm i -g @astryxdesign/cli

If you prefer a project-local script, the README suggests this entry in package.json, run as npm run astryx -- component --list:

"astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs"

Packages at a glance

The README says @astryxdesign/lab is internal and not published to npm.

Customization: how locked in are you?

Design systems often fail on this point. You adopt one, then fight it. Astryx makes four claims that address the problem.

• Open internals. Components compose at several levels, and the building blocks are exported. A swizzle command copies a component's full source into your project, a pattern familiar from other copy-in libraries.
• No styling lock-in. Meta authors styles with StyleX, its own CSS-in-JS system. You import pre-built CSS, and you can override with className using Tailwind, CSS modules or plain CSS.
• Theming without wrapping. A theme is a set of CSS custom property overrides, so you do not fork or wrap component source.
• Seven themes. Neutral, butter, chocolate, matcha, stone, gothic and y2k.

Coding UI components fitting into a modular frame, representing how Astryx building blocks compose

The swizzle command matters most for agent workflows. An agent that can read a component's full source can modify it with fewer guesses than one that only sees a compiled package. That also raises the usual risk: once you copy source in, upgrades become your job.

Astryx vs shadcn/ui, DESIGN.md and other options

The closest comparison is shadcn/ui, which also lets you copy component source into your project. Our own coverage includes the shadcn-based Solid Glass system and a look at the debate over AI copying creativity around shadcn.

The differences are scope and weight. Astryx brings 150+ components and its own styling engine. If your project already runs on Tailwind and a small set of components, it is a bigger decision than adding a theme file. The README says Tailwind overrides work, which lowers the cost of trying it.

What should you check before adopting it?

Our reading of the repository page suggests five checks.

1. Beta status. Meta calls it beta. APIs can change.
2. No tagged releases. The page showed an empty Releases section and no published packages listing at the time we read it. Check npm for the real version history, and pin exact versions.
3. Issue load. The repo showed 331 open issues and 395 open pull requests. That is normal for a project this size, but expect rough edges.
4. StyleX in your build. Pre-built CSS means you can skip StyleX compilation at first. Source builds use @astryxdesign/build, which adds a build step.
5. React 19 only. Older React 18 apps need an upgrade first.

Also test the agent claim on your own task. Ask your agent to build a table page from an Astryx template, then check whether it used real components or invented its own.

A simple way to test Astryx with a coding agent

Try this on a throwaway branch:

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli
npm run astryx -- component --list

Then give your agent a prompt such as: "Use the Astryx CLI to list components and read the docs for the table page pattern. Build a settings page with a form and a data table. Use only Astryx components." Review the diff for any raw HTML elements or hand-rolled styles. If the agent keeps inventing components, add the CLI commands to your project's AGENTS.md so the next session starts with them.

If you are new to steering agents with project files, our guide to CLAUDE.md, skills, hooks and subagents covers the mechanics. For the code-quality side, see AGENTS.md with linters and hooks.

Why Meta open-sourcing this matters

Meta already maintains React, and StyleX came from the same company. Astryx completes a stack: the UI library, the styling engine and now the components on top. Releasing it under MIT with agent tooling shows where UI libraries are heading. A library now has two audiences: the developer who reads Storybook, and the agent that reads a CLI.

For teams that build with AI, the practical lesson is clear. Whatever design system you use, give your agent a way to look up real components. A library with a docs command beats one that depends on what the model remembers. That is the idea we also saw in open UI kits built for agent interfaces, which also carry licensing risks that Astryx's MIT license avoids.

Details are accurate as of November 7, 2026. Astryx is in beta, and package names, commands and star counts can change.

Related reading

• Solid Glass: an open-source design system for AI agent interfaces
• DESIGN.md open spec for AI design systems
• Vercel and DESIGN.md: spec-driven AI UI
• Figma Specs: design rules for AI agents
• Claude Code AGENTS.md support
• DESIGN.md templates for professional UI with AI agents
• Official: meta/astryx on GitHub and StyleX