Facebook/Astryx

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

Astryx is an open source design system born from years of building internal tools at scale in Meta's monorepo. It has grown inside Meta over the last eight years and powers over 13,000 apps, shaped by the engineers, designers, and product teams who depend on it every day.

It provides the foundations, components, templates, and themes that work together to deliver consistent, accessible interfaces — and it's designed so both humans and AI agents can build with the same tooling.

What makes Astryx different:

Open internals: All primitives are exported and composable, not hidden. Compose at any level and build exactly what you need.Automatic spacing: Context-aware spacing compensation eliminates "double padding" issues so layouts stay clean without manual fixups.Themeable: First-class theming with a CSS variable cascade. Ten ready-made themes, all fully customizable.Agent ready: JSDoc annotations with composition hints, plus a CLI and MCP server so agents can scaffold, browse, and document using the same API you do.

For full setup instructions, see the ** @astryxdesign/core README**.

Quick install:

pnpm add @astryxdesign/core @astryxdesign/theme-neutral
pnpm add -D @astryxdesign/cli

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

yarn add @astryxdesign/core @astryxdesign/theme-neutral
yarn add -D @astryxdesign/cli

For reliable CLI access, add this script to your package.json

:

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

Then use the CLI as npm run xds -- component --list

. This avoids path errors when AI assistants or new developers invoke the CLI directly.

Then follow the setup guide to import styles, configure the theme provider, and start using components.

README@astryxdesign/cli

README@astryxdesign/build

README@astryxdesign/theme-*

README

@astryxdesign/lab

(experimental components) and@astryxdesign/vega

(Vega/Vega-Lite chart wrapper) are used internally for Storybook and the sandbox; they are not yet published to npm.

Over 90 components— accessible, themeable React components with built-in spacing, dark mode, and flexible styling.** Themes that fit your brand**— fully customizable themes ready for use. Make it yours without starting from scratch.** Ready to ship templates**— production-ready templates for common pages; just plug in your content.** A design system your agent can use**— scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line or MCP.

Design for speed: Foundations you can trust, speed you can feel. Teams stop reinventing the basics and start shipping the ideas that matter.Built by the people who use it: The system gets sharper when we put it to work in the real world. Using it in context strengthens the whole system for everyone.Ready for what's next: Opinionated foundations paired with flexible patterns so your system keeps pace, no matter how the craft evolves.

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

A library of 90+ 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.

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

Quick start for contributors: this repo uses pnpm 10 via Corepack. Enable it once and the right pnpm version installs automatically:

corepack enable
pnpm install

MIT