|

Meta’s Astryx Brings a CLI and MCP Server to an Open-Source React Design System Agents Can Read

ByRicardo
↗

Meta launched Astryx this week. It is an open-source design system, at the moment in Beta. The challenge 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 is production-tested inside Meta however younger as a public challenge.

What is Astryx

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

The styling layer is price understanding. StyleX compiles kinds to static, atomic CSS at construct time. Meta open-sourced StyleX on the finish of 2023. It powers Facebook, Instagram, WhatsApp, and Threads. External corporations 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 can 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 Ready’ Part

This is the primary distinction from different design programs. Astryx ships docs and tooling that AI brokers can learn. Components carry JSDoc annotations with composition hints. A CLI exposes the identical API a developer makes use of. There can also be an MCP server. MCP is the Model Context Protocol. Agents use it to scaffold, browse, and doc.

The CLI is named through astryx or the shorthand xds. One characteristic is absolutely necessary for automation. The CLI returns a self-describing manifest as JSON. It lists each command, argument, flag, and response sort. 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.

Copy Code
npx astryx part Button        # full docs for a part
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 are named default, impartial, day by day, butter, chocolate, matcha, stone, gothic, brutalist, and y2k. All are absolutely customizable. Theming makes use of a CSS variable cascade. You change the variables, and each part restyles. Component code stays untouched.

The interactive demo beneath reveals this straight. Pick a theme and watch the tokens replace reside.


Astryx · interactive explainer

01 · OVERVIEW

What Astryx is

An open-source React design system from Meta — foundations, parts, templates, and themes. Built on React and StyleX, Meta’s compile-time CSS engine. It ships pre-built CSS, so no construct plugin is required. Currently in Beta.

8 yrsconstructed inside Meta
13,000+apps it powers
150+parts (docs web site)
10ready-made themes

↗ github.com/facebook/astryx
MIT license
CLI + MCP
NoteThe GitHub repo states “over 90 parts”; Meta’s docs web site counts 150+. Both come from official Astryx sources.

02 · THEMING

The CSS-variable cascade

Themes are a cascade of CSS variables (tokens). Change the variables and each part restyles — part code by no means adjustments. Pick a theme:

Active tokens

IllustrativeThe cascade mechanism is strictly how Astryx themes work; per-theme token values are consultant.

03 · LAYOUT

Automatic spacing — the “double padding” repair

Nest a padded field in one other and the gaps stack; you usually strip padding by hand. Astryx’s context-aware spacing compensation retains the sting hole constant. Toggle it — the hole is measured from the rendered DOM.

Compensation: ON

Content
Measured edge hole
16px
IllustrativeThe hole is learn from the true DOM. The rule right here stands in for Astryx’s inside logic.

04 · ARCHITECTURE

Open internals you may compose and eject

Astryx exports its primitives as a substitute of hiding them, so that you compose at any stage. When a part is shut however not precise, eject its supply with the CLI and edit it straight.


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

export default operate Toolbar() {
  return (
    <div>
      <Button label="Save" variant="main" />
      <Badge>Beta</Badge>
    </div>
  );
}

Beta
← rendered from the code above

05 · AGENT READY

A CLI and MCP server brokers can learn

The CLI exposes the identical API a developer makes use of, plus an MCP server. One name returns a self-describing JSON manifest, so an agent reads structured instructions as a substitute of scraping assist. Click a command:

astryx · CLI (alias: xds)




RepresentativeCommand names and the manifest form match the Astryx CLI README (v0.0.14). Output is shortened for show.




    




06 · SETUP


Install and ship


Simplest path: Next.js + Tailwind. Astryx ships pre-built CSS, so no construct plugin is required.


# 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 shopper';
import sort {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {impartialTheme} from '@astryxdesign/theme-neutral/constructed';

export operate Providers({youngsters}: {youngsters: ReactNode}) {
  return <Theme theme={impartialTheme}>{youngsters}</Theme>;
}



        MITNext · Vite + TailwindCLI + MCPBeta — check earlier than prod
      




  



    

    

    01 / 06 · Overview




    Marktechpost
  










	

	





	

		

			

				

					
Similar Posts