astryx README

The project's README from github.com/facebook/astryx. As one markdown file: README.md.

Astryx

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

npm version license MIT PRs welcome

Docs Storybook Sandbox

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:

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:

# 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

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.

Packages

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.

Principles

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

Architecture

Foundations

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

Components

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

Patterns

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

Project Structure

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, and the Contributing Templates and Blog Review rubrics. Read the relevant one 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.

License

MIT

astryx (facebook/astryx)

Searching Database…

13.7K ·GitHub
Astryx
Что это такое?Astryx — это дизайн-система с открытым исходным кодом, готовая к работе с ИИ-агентами. Её создавали внутри Meta восемь лет. В ней более 150 доступных компонентов React, фирменное оформление через темы, тёмная тема, готовые шаблоны и CLI, и всё это работает как единая согласованная система.
Это фреймворк или библиотека компонентов?Это библиотека компонентов React (дизайн-система), которая распространяется как пакеты npm, а не фреймворк. Вы напрямую импортируете готовые CSS и типизированные компоненты React, не подключая плагин для сборки и отдельную библиотеку стилей.
Как подключить Astryx к проекту?Установите @astryxdesign/core, тему (например, @astryxdesign/theme-neutral) и зависимости peer dependencies, затем добавьте несколько импортов CSS и провайдер темы. Не требуются ни плагин для сборки, ни настройка PostCSS или Babel.
Что нужно до установки?Нужен React 19 или новее, так как react и react-dom — обязательные зависимости peer dependencies для @astryxdesign/core. Для участия в самом монорепозитории нужны Node 22+ и pnpm 11.
Всё ли в Astryx готово к продакшену?Основная система находится в бета-версии. Пакеты для графиков (@astryxdesign/vega, @astryxdesign/charts) опубликованы в npm только с тегом @canary, стабильного релиза пока нет. Пакет @astryxdesign/lab предназначен только для внутреннего использования и вообще не публикуется.
Для кого это сделано?Для команд, которые разрабатывают веб-приложения на React 19 и хотят компонентную систему, которой одинаково пользуются и люди-разработчики, и ИИ-ассистенты для программирования, по одним и тем же API и документации.
Чем Astryx отличается от обычной закрытой дизайн-системы?Его компоненты — это «открытые внутренности»: строительные блоки экспортируются напрямую для компоновки, а команда swizzle в CLI может скопировать полный исходный код компонента в ваш проект, чтобы вы полностью владели им и могли его менять.
Astryx навязывает определённый подход к стилям?Нет. Внутри Astryx стили написаны на StyleX, но для пользователей это незаметно. Компоненты можно переопределять через className с помощью Tailwind, модулей CSS или обычного CSS.
Как изменить оформление без форка компонентов?Тема в Astryx — это просто набор переопределений пользовательских свойств CSS, поэтому можно полностью переделать внешний вид системы, не оборачивая и не форкая исходный код компонентов.
Какие темы есть из коробки?В комплекте семь готовых тем, которые можно полностью настроить: neutral, butter, chocolate, matcha, stone, gothic и y2k.
What are similar projects?arc-library, chakra-ui, shoelace, base-ui, react-native-ui-kitten, kumo, boardui, react-spectrum
Which topics is it in?design-tools, templates, ui-library, dark-mode, design-system, playwright, theme, accessibility, monorepo, vite, component-library, nextjs
Creator
facebook
Size
1.1 GB
Stars
13.7K
Updated
CommitOct 17Releasev0.7.1Oct 15
Age
9mo
Commits · 90 Days