Meta's Asterix: An Open-Source Design System Built for AI Coding Agents
Meta open-sourced Asterix, a 150+ component React design system with a CLI that doubles as documentation for AI coding agents.
What is Meta’s Asterix design system?
Asterix is an open-source React design system released by Meta, built over roughly eight years of internal use before going public in beta in June. Inside Meta it reportedly powers more than 13,000 internal apps, making it the company’s largest design system. On GitHub it’s licensed under MIT and sits around 18,700 stars. What sets it apart from typical component libraries is that it’s designed from the ground up to be used by AI coding agents, not just human developers, with a CLI that acts as the single source of truth for both.
TL;DR
- Asterix ships 150+ components (174 according to the installed CLI), plus full page and block templates like dashboards, login screens, and AI chat layouts.
- The CLI generates the documentation site, not the other way around, so there’s one canonical source of truth that can’t drift out of sync with what the agent actually uses.
- Styling runs on Stylex under the hood, but developers never touch it directly: you import two CSS files and theme everything through CSS variables, with seven themes and dark mode included.
- A
swizzlecommand copies a single component’s full source into your project when you need total control, similar to Shadcn’s model but applied selectively rather than to the whole library. - Meta publishes its own “vibe test” benchmarks comparing Asterix, Asterix plus Tailwind, Shadcn plus Tailwind, and raw HTML, and openly admits Shadcn wins more nights than Asterix does.
- It’s still early: version 0.7, requires React 19 and Node 22.13+, only the neutral theme is officially maintained, and a demo page can ship around 600KB of JavaScript before gzip.
Build a vendor-risk app for our 300 buyers.
How does the CLI work as documentation for agents?
The core idea behind Asterix is “the CLI is the docs.” Instead of maintaining a documentation website separately from a command-line tool, Meta built it so the docs site actually reads from the CLI. That means there’s only one copy of the truth about what components exist, what props they take, and what their defaults are. An agent querying the CLI gets the exact same information a human would see on the docs site, and the two can never fall out of sync.
Practically, this plays out through several commands. asterix init detects which coding agent you’re using (Claude, Cursor, Codex, and others are supported) and writes a managed instruction block into that agent’s config file, for example CLAUDE.md for Claude. That block tells the agent to start every page from a template, avoid raw div soup, never hardcode hex colors or pixel values, look up components before using them, and run a doctor command to check its own work afterward.
A search command lets the agent query across components, hooks, docs, templates, and themes in one ranked list. A props-lookup command returns the exact types, variants, and defaults for a given component, which cuts down on the agent inventing props that don’t exist. Every command can return structured JSON with stable error codes, plus a “dense mode” meant to reduce token usage. There’s also a manifest command describing the whole CLI (Meta calls it an OpenAPI spec for the CLI itself), an llms.txt file for agents that read it, and a hosted MCP server that exposes just two tools, search and get, for agents that would rather not shell out to a CLI at all.
What do you actually get: components, templates, and theming?
Asterix includes more than 150 accessible React components with full TypeScript types: dialogs, tables, forms, date pickers, an app shell, and the rest of the standard component-library inventory. Above that layer sit page templates and block templates, which are complete, ready-to-use layouts (a dashboard, a settings page, a login screen, an AI chat interface) that can be dropped into a project directly rather than assembled component by component.
Styling is built on Stylex, Meta’s compile-time CSS-in-JS system, but you’re not expected to configure it. You import two pre-built CSS files and the components just work, with no build plugin, no PostCSS setup, and no Babel configuration needed. If you need to override appearance, you pass a className, and it can be Tailwind, CSS modules, or plain CSS depending on what your project already uses.
Theming works through CSS variables, so a theme is just a set of variable values rather than a wrapper or a fork. Seven themes currently exist (neutral, butter, chocolate, stone, gothic, and Y2K among them), along with built-in dark mode. Only the neutral theme is officially marked as maintained right now; the others ship as separate installable packages, and a charts package is only available on the Canary release channel.
How does the build command turn a description into a page?
One of the more notable workflows is the build command. You describe what you want in plain English, something like “a settings page for a SaaS app,” and rather than generating code from scratch, the CLI picks the closest existing page template, suggests which blocks to fill it with, and lists any remaining components needed. The underlying logic, as framed by Meta, is that AI models are effectively copycats: give an agent good, consistent examples to copy from, and it produces more consistent output than if it’s left to generate a UI from first principles.
From there, a template command copies the selected template directly into the project, a theme gets added with a command like theme add neutral, and after wiring up a small amount of code in the app’s entry file, a working page is ready to run in a dev server. The bulk of the time in a typical setup goes to npm install rather than the actual scaffolding.
How is Asterix different from Shadcn?
Shadcn popularized a model where you copy component source code directly into your own project and own it from day one, giving you full control but no upstream updates. Asterix takes a hybrid approach: components are installed and consumed as a normal package by default, which means you get upstream fixes and improvements automatically. When you need full control over a specific component, a swizzle command copies that one component’s complete source into your project, after which you own and maintain it yourself while everything else continues to receive updates.
The bigger difference isn’t architecture, though, it’s intent. Shadcn is a component collection meant primarily for human developers to copy and customize. Asterix is explicitly built around the assumption that an AI agent is doing much of the building, with CLI-driven lookups, strict formatting rules baked into agent instructions, and templates meant to be copied wholesale rather than assembled from scratch.
Is Asterix actually better than Shadcn for AI-generated UI?
Meta publishes its own answer to this, and it’s refreshingly direct. In the repository, a “vibe tests” folder runs nightly comparisons where agents are given identical UI prompts and asked to build the same interface four different ways: with Asterix, with Asterix plus Tailwind, with Shadcn plus Tailwind, and with raw HTML. A separate judge agent then scores each result.
On a strong night, Asterix reportedly scored 98, Shadcn scored 95, and raw HTML scored 82. But Meta also published a bad night where Asterix dropped to 77 because the agent invented imports and props that didn’t exist. By Meta’s own account, Shadcn actually wins more nights across the full test history than Asterix does. That kind of transparency is unusual for a company promoting its own tool, and it’s worth taking seriously: Asterix isn’t a guaranteed upgrade, it’s a different set of constraints that happens to produce more consistent results in many, but not all, cases.
What are the current limitations?
Without shadow IT.
Asterix is still in beta, sitting at version 0.7 with frequent releases, so expect breaking changes and fast iteration. It requires React 19 or newer and Node 22.13 or newer, which rules it out for projects still on React 18. Only the neutral theme is officially maintained, with other themes shipped as separate packages, and the charts package lives on the Canary channel only. Swizzling a component means you then need a Stylex compiler in your build pipeline, or that component won’t render correctly. The strict agent rules (no raw divs, no hardcoded hex values) are good for consistency but may clash with teams whose workflow leans heavily on Tailwind utility classes. Bundle size is also a consideration: a basic demo page reportedly came in around 600KB of JavaScript before gzip compression.
Frequently Asked Questions
What is Meta Asterix used for?
It’s an open-source React design system with more than 150 components, page templates, and a CLI, designed so both human developers and AI coding agents build UIs using the same consistent system and documentation.
Does Asterix replace Shadcn?
Not necessarily. Meta’s own benchmarks show Shadcn outperforms Asterix on many test nights. Asterix offers a different tradeoff: package-based components with selective “swizzling” for full control, versus Shadcn’s copy-everything-into-your-project model.
Do I need to know Stylex to use Asterix?
No. Stylex powers the styling internally, but you interact with it by importing pre-built CSS files and passing className props using Tailwind, CSS modules, or plain CSS.
What are the system requirements for Asterix?
It requires React 19 or newer and Node.js 22.13 or newer, so projects still running React 18 can’t use it yet.
How do I connect Asterix to a coding agent like Claude or Cursor?
Run asterix init and specify your agent; the CLI writes a managed instructions block into that agent’s config file (such as CLAUDE.md), or you can connect through the hosted MCP server, which exposes search and lookup tools directly to the agent.
