meta/astryx

An open source design system that's fully customizable and built for how we build now: by people and the agents working alongside them.
Currently in Beta · Built on React 19+ and StyleX
Docs · Storybook · Sandbox · Contributing · Discord
## Overview
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 and shaped by the engineers, designers, and product teams who depend on it every day.
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 — no build plugin, no styling library to adopt — and both people and AI assistants build with the same tooling.
What makes Astryx different:
Open internals. Components are built to be composed at any level, not locked behind a closed top-level API. The building blocks you'd reach for are exported directly, and when you need to go deeper, swizzle ejects a component's full source into your project to own.
No styling lock-in. Astryx authors its styles with StyleX, but that's invisible to consumers. Override with className using Tailwind, CSS modules, or plain CSS — whatever your project already uses.
Customize without wrapping. A theme is a set of CSS custom property overrides, so a designer can make Astryx unmistakably theirs without forking or wrapping component source.
Built for people and agents. The API, docs, and CLI are designed together so a person and an AI assistant build the same way, from the same reference.
## Getting Started
Astryx requires React 19 or later (react and react-dom are peer dependencies of @astryxdesign/core).
Install Astryx, a theme, and its peer dependencies:
bash
# npm
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli
# pnpm
pnpm add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
pnpm add -D @astryxdesign/cli
# yarn
yarn add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
yarn add -D @astryxdesign/cli
You can also install the CLI once for your computer, so astryx works in any folder and every coding agent knows Astryx; in a project, it still runs that project's own version:
bash
npm i -g @astryxdesign/cli
Project install, global install, or both? astryx docs global/project-global-or-both compares them (both is recommended), and astryx docs global explains how global mode works.
The simplest setup is a few CSS imports plus a theme provider — no build plugin, no PostCSS or Babel config. See the @astryxdesign/core README for the full guide (Next.js, Tailwind, Vite, and CDN).
For reliable CLI access, add a script to your package.json:
json
"scripts": {
"astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs"
Then use it as npm run astryx -- component --list. This avoids path errors when AI assistants or new developers invoke the CLI directly.
## Packages
| Package | Description | README |
| @astryxdesign/core | Components, theme system, and utilities | README |
| @astryxdesign/cli | CLI tooling: component docs, templates, scaffolding, themes, and codemods | README |