Meta’s Astryx Brings a CLI and MCP Server to an Open-Supply React Design System Brokers Can Learn

Meta launched Astryx this week. It’s an open-source design system, at the moment in Beta. The venture grew inside Meta’s monorepo over eight years. Astryx is constructed on React and StyleX. StyleX is Meta’s compile-time CSS engine.

TL;DR

• Astryx is Meta’s open-source, agent-ready React design system, now in Beta.
• It pairs StyleX styling with a CSS-variable theme cascade and ten themes.
• A CLI and MCP server lets AI brokers scaffold and doc UIs.
• It’s production-tested inside Meta however younger as a public venture.

What’s Astryx

Astryx is a element library and a system round it. It offers foundations, elements, templates, and themes. Foundations cowl typography, coloration, format, and accessibility. The official repository paperwork greater than 90 React elements. Meta’s docs web site counts over 150. Elements ship with built-in spacing, darkish mode, and versatile styling. Templates compose full pages like dashboards, settings, and kinds. The license is MIT. TypeScript makes up about three-quarters of the codebase.

The styling layer is value understanding. StyleX compiles kinds to static, atomic CSS at construct time. Meta open-sourced StyleX on the finish of 2023. It powers Fb, Instagram, WhatsApp, and Threads. Exterior firms like Figma and Snowflake additionally use it.

Two design decisions stand out. First, internals are open. All primitives are exported and composable, not hidden. You’ll be able to compose at any stage. Second, spacing is automated. Astryx calls this context-aware spacing compensation. It eliminates ‘double padding’ points with out handbook fixups.

The ‘Agent Prepared’ Half

That is the primary distinction from different design programs. Astryx ships docs and tooling that AI brokers can learn. Elements carry JSDoc annotations with composition hints. A CLI exposes the identical API a developer makes use of. There’s additionally an MCP server. MCP is the Mannequin Context Protocol. Brokers use it to scaffold, browse, and doc.

The CLI known as by way of astryx or the shorthand xds. One function is de facto essential for automation. The CLI returns a self-describing manifest as JSON. It lists each command, argument, flag, and response kind. Compareing it to an OpenAPI spec for the CLI. So an agent needn’t scrape --help textual content. It reads one structured payload as a substitute.

npx astryx element Button        # full docs for a element
npx astryx template dashboard      # emit full web page supply
npx astryx manifest --json         # machine-readable command spec

Themes and the CSS-Variable Cascade

Astryx ships ten ready-made themes. They’re named default, impartial, day by day, butter, chocolate, matcha, stone, gothic, brutalist, and y2k. All are totally customizable. Theming makes use of a CSS variable cascade. You alter the variables, and each element restyles. Part code stays untouched.

The interactive demo under exhibits this immediately. Decide a theme and watch the tokens replace dwell.

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

export default perform Toolbar() {
  return (
    

      <Button label="Save" variant="major" />
      <Badge>BetaBadge>
    
  );
}

# get the true element supply to edit in your repo
$ npx astryx swizzle Button

# then import your native copy as a substitute of the bundle
import {Button} from './elements/Button';

# set up core, a theme, and the CLI
npm set up @astryxdesign/core @astryxdesign/theme-neutral
npm set up -D @astryxdesign/cli

// suppliers.tsx — wrap your app as soon as
'use consumer';
import kind {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/constructed';

export perform Suppliers({youngsters}: {youngsters: ReactNode}) {
  return <Theme theme={neutralTheme}>{youngsters}Theme>;
}

npm set up @astryxdesign/core @astryxdesign/theme-neutral
npm set up -D @astryxdesign/cli

Wrap your app within the Theme supplier.

'use consumer';
import kind {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/constructed';

export perform Suppliers({youngsters}: {youngsters: ReactNode}) {
  return {youngsters};
}

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

export default perform Web page() {
  return ;
}