Meta’s Astryx: A CLI and MCP Server That Finally Lets AI Agents Understand Your React Design System

–spacing scale 12px

import {Button} from '@astryxdesign/core/Button';
import {Badge} from '@astryxdesign/core/Badge';

export default function Toolbar() {
  return
Getting Started: A Code Example

The easiest way to begin is with Next.js and Tailwind. Astryx comes with pre-built CSS, so there's no need for any build plugins. Just install the core package and a theme.

npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli
Wrap your application with the Theme provider.

Wrap your application with the Theme provider.

'use client';
import type {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function Providers({children}: {children: ReactNode}) {
  return {children};
}
Then start using components right away.
import {Button} from '@astryxdesign/core/Button';

export default function Page() {
  return ;
}
A Tailwind bridge maps design tokens to utility classes. This means bg-surface resolves to a system token under the hood, saving you from writing repetitive var(--...) classes. A Vite setup and a StyleX-only approach are also documented.
Use Cases With Examples
Internal dashboards are an ideal use case. You can quickly build evaluation or monitoring views. Astryx supplies dashboard, table, and detail templates out of the box. A Vega/Vega-Lite chart wrapper takes care of plotting needs.
AI agent-built interfaces are another strong fit. An AI coding assistant can scaffold a settings page by invoking the CLI, consulting the agent-ready documentation, and then composing the necessary components. The MCP server turns this into a structured workflow rather than trial and error.
Multi-brand products are the third scenario. A single component set can serve multiple brands. You switch themes through the variable cascade, with no need to rewrite any components.
How Astryx Compares
Dimension
Astryx (Meta)
shadcn/ui
MUI (Material UI)
Styling engine
StyleX, compile-time atomic CSS
Tailwind CSS + Radix primitives
Emotion runtime (CSS-vars mode available)
Theming
CSS-variable cascade, 10 themes
CSS variables you edit directly
Theme object via provider
Components
90+ (docs site lists 150+)
Copy-paste set you own
Large component suite
Agent tooling
CLI + MCP server + JSON manifest
CLI to add components
None built in
Code ownership
Composable; swizzle to eject source
You own copied source
Library dependency
License
MIT
MIT
MIT (core)
Maturity
Beta public; 8 years internal
Widely adopted
Mature, widely adopted
shadcn/ui is the closest familiar comparison. Both emphasize composition and CLI scaffolding. Astryx sets itself apart with its StyleX engine and MCP tooling. These competitor details are summarized and will evolve over time.
Strengths and Weaknesses
Strengths:
Compile-time StyleX styling, battle-tested at Meta scale
Open, composable primitives available at every layer
Ten customizable themes driven by a CSS variable cascade
A CLI and MCP server give AI agents a genuine API to work with
Automatic spacing eliminates common layout bugs
MIT licensed with support for Next.js, Vite, and Tailwind
Weaknesses:
Beta status means APIs and versions may shift
The CLI is still early, currently at version 0.0.14
StyleX carries a steeper learning curve than Tailwind
Component counts differ between the repository and the docs site
Adoption beyond Meta remains unproven
Check out the Repo and Project page. Also, feel free to follow us on Twitter and don't forget to join our 150k+ ML SubReddit and subscribe to our Newsletter. Wait — are you on Telegram? Now you can join us on Telegram as well.
Need to partner with us for promoting your GitHub Repo OR Hugging Face Page OR Product Release OR Webinar etc.? Connect with us