Astryx: The Design System Behind 13,000+ Meta Apps Is Now Open Source

Astryx is an open source design system that grew inside Meta over the last eight years, where it became the most used and largest design system in the company, powering 13,000+ apps. It is built on React 19 and StyleX, it is currently in Beta, and it ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates and a CLI as one cohesive system. You import pre-built CSS and use typed React components, with no build plugin and no styling library to adopt, and both people and AI assistants build with the same tooling. It has 18,029 stars, and the README opens on the idea behind all of it: a design system that is fully customizable and built for how we build now, by people and the agents working alongside them.

The first thing that sets Astryx apart is that its internals are open. Components are built to be composed at any level, not locked behind a closed top-level API. The building blocks you would reach for are exported directly, and when you need to go deeper, swizzle ejects a component's full source into your project to own. That is a different deal from most design systems, where the component is a black box and your only options are props or a fork. Here the source is part of the API. The same thinking runs through the principles in the README: guidance over enforcement, so components give you capability rather than guardrails that fight you, and strong, documented conventions, so once you have learned a few components, the rest feel familiar.

Astryx authors its styles with StyleX, but that is invisible to consumers. You override with className using Tailwind, CSS modules or plain CSS, whatever your project already uses, so adopting Astryx does not mean adopting a new styling religion. A theme is a set of CSS custom property overrides, so a designer can make Astryx unmistakably theirs without forking or wrapping component source. It ships seven ready-made themes, neutral, butter, chocolate, matcha, stone, gothic and y2k, each fully customizable. Before you settle a palette, a Color Converter turns your brand hex values into the formats a theme file wants, so the tokens you pick in a design tool land in code exactly as chosen.

Astryx is organized in three layers. Foundations are the building blocks for visually cohesive and accessible interfaces: typography, color, layout and accessibility. Components are the library itself, 150+ reusable UI building blocks with full TypeScript support. Patterns are battle-tested design solutions for common interactions and workflows: table pages, detail page layouts, form wizards, navigation patterns and data entry flows. The type scale in the foundations layer is set in relative units, so when you are matching a design spec to code, an Em to Px Converter converts the spec's pixel values into the em values the scale uses. The point of the layering is that you rarely start from a blank page: a pattern gives you the shape, components fill it in, and foundations keep it consistent.

Astryx requires React 19 or later, with react and react-dom as peer dependencies of @astryxdesign/core. Install the core, a theme and StyleX with npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex, then add the CLI as a dev dependency with npm install -D @astryxdesign/cli. The simplest setup is a few CSS imports plus a theme provider. There is no build plugin, no PostCSS or Babel config. You can also install the CLI once for your computer with npm i -g @astryxdesign/cli, so astryx works in any folder and every coding agent knows Astryx, while a project still runs its own version. The CLI handles component docs, templates, scaffolding, themes and codemods, and the README recommends adding a script to package.json so assistants and new developers invoke it the same way every time. Docs, a live Storybook and a sandbox all ship at astryx.atmeta.com, and the project welcomes contributions through its Discord and contributing wiki.