Meta's Astryx design system, built from eight years powering 13,000+ internal apps, ships 150+ components with full customization and agent-ready APIs.

What Astryx is

Astryx is an open-source design system built on React 19+ and StyleX. The README states it grew inside Meta over eight years and became the most-used design system in the company, powering 13,000+ apps. It ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive system.

The system is currently in beta. It is MIT licensed and has 662 open issues on GitHub.

How it differs from typical design systems

Astryx exports composable building blocks rather than locking components behind a closed top-level API. When you need to customize deeper, you can swizzle to eject a component’s full source into your project to own it.

Styling is not locked in. Astryx authors its styles with StyleX, but that is invisible to consumers. You can override with className using Tailwind, CSS modules, or plain CSS—whatever your project already uses.

Theming works as CSS custom property overrides, so a designer can customize Astryx without forking or wrapping component source.

The API, docs, and CLI are designed so a person and an AI assistant build the same way from the same reference.

Installation and setup

Astryx requires React 19 or later as peer dependencies. Install with:

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

npm install -D @astryxdesign/cli

Or with pnpm:

pnpm add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex

You can also install the CLI globally so astryx works in any folder. The README recommends installing both globally and per-project.

No build plugin, PostCSS, or Babel config is needed. The setup is CSS imports plus a theme provider, then import pre-built CSS and use typed React components directly.

What’s included

The core package includes components, theme system, and utilities. The CLI provides component docs, templates, scaffolding, themes, and codemods. Seven ready-made themes are available: neutral, butter, chocolate, matcha, stone, gothic, and y2k.

Resources include a Storybook at astryx.atmeta.com/storybook/ and a sandbox at astryx.atmeta.com/sandbox/.

Go deeper

Get the latest AI updates in the Tech AI Magazine app
iPhone · Android