meta/astryx

An open source design system that's fully customizable and agent ready

Summary

Astryx is Meta’s open-source design system for React 19+, implemented in TypeScript and using StyleX internally to ship prebuilt CSS and typed components. It combines 150+ accessible components, brand-level theming, dark mode, templates, and CLI tooling, but is currently in beta.

What it is useful for

Astryx suits product teams that need common UI conventions across multiple React applications. Its documented patterns cover table pages, detail-page layouts, form wizards, navigation, and data-entry flows, while its components provide reusable building blocks for typography, color, layout, and accessibility.

It is also useful when a design system must accommodate existing code. A theme is expressed as CSS custom-property overrides, so designers can change the system without forking or wrapping component source. Engineers can pass className to override styles with Tailwind, CSS modules, or plain CSS. For deeper changes, Astryx exports its building blocks and documents swizzle as a way to eject a component’s full source into the project.

The CLI adds component documentation, templates, scaffolding, themes, and codemods. Its documentation and conventions give engineers and AI assistants the same reference while they build UI.

There are current limits: @astryxdesign/lab is internal and unpublished; @astryxdesign/vega and @astryxdesign/charts are available only under the npm canary tag and have no stable release. The ordinary consumer path uses prebuilt CSS with no build plugin, while @astryxdesign/build targets StyleX source builds.

How engineers can use it

Astryx requires React 19 or later; react and react-dom are peer dependencies. For a new application, install the core package, neutral theme, StyleX, and CLI:

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

Follow packages/core/README.md under “Quick Start” for the required CSS imports, theme provider, and component usage. It also documents Next.js, Tailwind, Vite, and CDN setup. The root README does not specify the exact CSS imports, so use the core README rather than improvising them.

For reliable CLI access, add this project script:

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

Run npm run astryx -- component --list to list components, then use the CLI’s documentation and scaffolding when implementing features such as a table page or form wizard. The README also allows a global installation with npm i -g @astryxdesign/cli; inside a project, the project’s own version still runs.

To contribute to Astryx itself, use Node 22+ on an active LTS line and pnpm 11:

corepack enable
pnpm install