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

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.

Astryx requires React 19 or later (react and react-dom are peer dependencies of @astryxdesign/core).

Install Astryx, a theme, and its peer dependencies:

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:

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:

"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.

Package Description README

@astryxdesign/core Components, theme system, and utilities README

@astryxdesign/cli CLI tooling: component docs, templates, scaffolding, themes, and codemods README

@astryxdesign/build Build plugins for StyleX source builds README

@astryxdesign/theme-* Seven ready-made, fully customizable themes (neutral, butter, chocolate, matcha, stone, gothic, y2k) README

@astryxdesign/lab (experimental components) is used internally for Storybook and the sandbox and is not published to npm. @astryxdesign/vega (Vega/Vega-Lite chart wrapper) and @astryxdesign/charts (chart components) are published to npm only under the @canary dist-tag — there is no stable release yet.

These are the promises Astryx makes to the people building on it.

Foundations

The building blocks for visually cohesive and accessible interfaces: typography, color, layout, and accessibility.

A library of 150+ reusable UI building blocks with full TypeScript support.

Battle-tested design solutions for common interactions and workflows: table pages, detail page layouts, form wizards, navigation patterns, data entry flows.

Directory Purpose

apps/ Example apps, the docsite, and Storybook

packages/ Published packages: core, cli, build, themes

internal/ Internal tooling: test utilities, eslint plugin, vibe tests

Contributing

We welcome contributions! See CONTRIBUTING.md for the full guide.

Questions, or want a hand with a PR? Come find us in Discord.

Our conventions and review rubrics live in the Contributing wiki — including API Conventions, Design Conventions, the Component Lifecycle, the Contributing Templates, and the Blog Review Rubric. Read the relevant rubric before opening a PR.

Quick start for contributors: this repo uses Node 22+ on an active LTS line and pnpm 11. Install pnpm directly, or enable Corepack once so the pinned pnpm version installs automatically:

corepack enable pnpm install

If corepack is missing, install pnpm directly or install Corepack manually; see the troubleshooting notes in CONTRIBUTING.md.

The Theme Showcase DOM tests use the root ui project for shared DOM and StyleX test setup. Run pnpm exec vitest run --project ui apps/docsite/src/tests/theme-showcase/ from the repository root.