Первый взгляд на Astryx, дизайн-систему Meta

Astryx — это опенсорсная переработка дизайн-системы, выросшей внутри Meta. О ней объявили в блоге Astryx 18 июня 2026 года и выпустили в виде публичной беты под лицензией MIT: более 150 доступных (accessible) React-компонентов, семь готовых тем, шаблоны и CLI, построенные на React 19 или новее и StyleX.

Если вы выпускали продукты на MUI, вам знаком один вариант компромисса: компоненты работают, а потом вы тратите целый спринт на борьбу с объектом темы, чтобы кнопка перестала выглядеть как чужая кнопка. Если у вас в репозитории лежит исходный код shadcn/ui, вам знаком другой: сорок файлов компонентов, полностью ваших, и никакого апстрима, из которого можно подтянуть исправление управления фокусом.

Meta позиционирует Astryx как нечто среднее между этими двумя подходами. Список возможностей найти легко; но реальную стоимость внедрения определяет пятиступенчатая лестница кастомизации и то, на какой её ступени в итоге окажется ваша команда. В этой статье разберём, что такое Astryx, как его устанавливать и использовать, как устроено оформление тем, чего стоит каждая ступень лестницы и как всё это соотносится с shadcn/ui и Base UI.

Что такое Astryx?

Astryx — это библиотека компонентов, вокруг которой выстроена целая система: типизированные React-компоненты, поставляемые вместе с предварительно скомпилированным CSS, плюс темизация на уровне бренда, тёмная тема, шаблоны страниц и CLI — всё это распространяется единым набором пакетов. В техническом описании Meta представляет проект как опенсорсную переработку системы, которая развивалась внутри компании восемь лет, охватила более 13 000 продуктов и примерно половину обновлений получила от внутреннего сообщества разработчиков. Стили написаны с помощью StyleX — компилятора Meta, который во время сборки превращает объекты стилей в атомарный CSS без конфликтов имён. Это важно, если ваше возражение против CSS-in-JS связано с накладными расходами во время выполнения: никакого движка стилей в браузере здесь не работает.

CLI — это то место, где происходит большая часть работы с проектом, как для людей, так и для машин. Документация компонентов, дизайн-токены, шаблоны страниц, инструменты темизации и кодмоды для обновлений — всё выдаётся через него, независимо от того, вызываете ли вы его из терминала, читаете его типизированный JSON-вывод или импортируете его функции; агенты и инструменты сборки используют тот же самый API. Заявленная самим проектом «AI-грамотность» (AI-fluent) и готовность к работе с агентами — это позиционирование, а не измеренный результат: для описанного Meta испытательного стенда ни в одном из анонсов результаты не опубликованы.

Как на практике использовать Astryx?

React 19 — это минимальная планка: @astryxdesign/core указывает react и react-dom версии 19.0.0 и выше как peer-зависимости. Это первый барьер. Второй — зрелость: @astryxdesign/core публикуется в ветке 0.x на npm, а @astryxdesign/vega и @astryxdesign/charts поставляют реальные сборки только под dist-тегом @canary, тогда как их тег latest до сих пор указывает на заглушку.

Установите основной пакет, пакет темы и peer-зависимость StyleX, а CLI — как dev-зависимость:

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli
npx @astryxdesign/cli init

Шаг init записывает индекс компонентов Astryx в ваш AGENTS.md или CLAUDE.md; его можно пропустить, если с репозиторием не работает ни один агент. На простом пути далее вы импортируете три таблицы стилей в нужном порядке и оборачиваете приложение в провайдер темы:

@import '@astryxdesign/core/reset.css';
@import '@astryxdesign/core/astryx.css';
@import '@astryxdesign/theme-neutral/theme.css';

По утверждению самого репозитория, на этом настройка заканчивается: три импорта, провайдер и никаких изменений в вашей сборочной цепочке. Продвинутый путь предполагает сборку из исходников на TypeScript и StyleX с помощью @astryxdesign/build, который содержит плагины для Babel, PostCSS и Vite, так что бандлер выдаёт стили только для реально импортируемых компонентов. Meta оценивает объём такого CSS примерно в треть полной таблицы стилей на своём эталонном приложении — но это их измерение на их собственном коде, а не общее правило. Каждый компонент импортируется из собственного подпути, а не из корня пакета.

Темизация: поведение — в системе, внешний вид — в токенах

Astryx делит ответственность пополам. Поведение и доступность живут в библиотеке; внешний вид — в слое токенов, поэтому конфигурация темы содержит цвет, типографику, радиусы, отступы и анимацию, и изменение одного значения перекрашивает каждый компонент, который его читает, без необходимости открывать код компонентов. Светлые и тёмные значения располагаются рядом в одной теме, а не в двух параллельных файлах, и тему можно переключать во время выполнения или скомпилировать в статическую таблицу стилей. Темы выходят за рамки CSS-переменных: они могут переопределять отдельные компоненты и их части, а также добавлять собственные варианты.

Вместе с проектом поставляются семь готовых тем, и вы начинаете с одной из них, а не с нуля: theme list показывает доступные темы, включая темы из установленных интеграций, а theme add <slug> добавляет выбранную в ваш проект в виде исходного кода, который можно редактировать. В этом и состоит вся ставка проекта, если сформулировать её одной строкой. Дизайнер владеет конфигурационным файлом, и никому не нужно форкать или оборачивать компонент, чтобы изменить его внешний вид.

Ступенчатый путь кастомизации

Кастомизация в Astryx нарастает по пяти ступеням: использовать компоненты как есть, настроить токены темы, добавить классы, наложить собственный CSS и, наконец, перенести исходный код компонента (swizzle) в свой репозиторий. Каждая ступень даёт больше контроля и стоит больше ответственности за сопровождение. Первые четыре сохраняют вас на общем пути обновлений; пятая навсегда снимает с него данный компонент.

Swizzling — это дверь в одну сторону. Часть внутренней реализации просто не доступна через публичный API: приватное состояние, структура DOM или обработчики событий, до которых не добраться, — и извлечение исходного кода остаётся единственным путём к ним; с этого момента вы поддерживаете компонент, а не библиотека. CLI извлекает исходный код компонента и запускает кодмоды для версий командами astryx swizzle Button и astryx upgrade --apply:

npx @astryxdesign/cli swizzle Button

Для разовых запусков используйте форму со scope: пока @astryxdesign/cli не добавлен в зависимости, npm разрешает голое имя astryx в совершенно другой пакет. Практический шаг перед внедрением Astryx — проверить два-три самых сложных ваших компонента на предмет пятой ступени: если нужная вам кастомизация требует доступа к внутренностям, заложите в расчёты владение этим исходным кодом с первого дня.

Совместимость стилей: xstyle, className и Tailwind

Компоненты Astryx принимают и типизированный проп xstyle для переопределений через StyleX, и обычный className, поэтому они сосуществуют с Tailwind, CSS Modules или обычными таблицами стилей. Один и тот же компонент, три способа:

import * as stylex from '@stylexjs/stylex';
import {Button} from '@astryxdesign/core/Button';

const styles = stylex.create({
  save: {alignSelf: 'flex-end', marginBlockStart: 24},
});

// 1. As shipped
<Button label="Save" variant="primary" />;

// 2. Typed StyleX override, compiled at build time
<Button label="Save" variant="primary" xstyle={styles.save} />;

// 3. Plain className, no compiler involved
<Button label="Save" variant="primary" className="ml-auto mt-6" />;

На пути с предкомпилированными стилями третий вариант не требует дополнительной сборочной цепочки: StyleX — это то, как Astryx пишет свои стили, а не то, что вам нужно настраивать. Есть одно условие. Astryx загружает свои таблицы стилей в каскадные слои — @layer reset для сброса и @layer astryx-base для стилей компонентов, — а слои не подчиняются специфичности: всё, что осталось вне слоёв или размещено в слое, объявленном позже, выигрывает в любом случае. Поэтому проект, в котором уже есть глобальный CSS, старый reset или Tailwind, должен сам задать порядок слоёв и осознанно поместить каждую таблицу стилей в слой.

Astryx против shadcn/ui и Base UI: в чём разница?

Meta противопоставляет Astryx двум сценариям, названным в анонсе: либо вы берёте дизайн-систему крупной компании и наследуете её бренд, либо собираете компоненты копипастом и получаете свободу, теряя при этом общую согласованность, исправления из апстрима и путь обновлений, а доступность по умолчанию ложится на вашу команду. Это аргумент Meta в пользу собственного продукта, и его стоит сопоставить с тем, как альтернативы описывают себя сами. shadcn/ui описывает себя ровно наоборот: это не библиотека, которую вы устанавливаете, а способ построить собственную, получив код компонентов для прямого редактирования. Владение кодом здесь — фича, а не побочный эффект, о чём подробнее рассказано в нашем материале о том, почему команды переходят на shadcn/ui. Base UI поставляет headless-компоненты и хуки для React вовсе без собственного CSS, так что внешний вид результата целиком на вашей совести.

Читать это стоит как перечень ограничений, а не приговоров: Base UI даёт доступное поведение и никаких мнений о внешнем виде, shadcn/ui даёт исходный код и сопутствующее сопровождение, а Astryx даёт темизированную систему, из которой вы всё ещё можете «выпрыгнуть» покомпонентно. Пятая ступень Astryx приводит к той же позиции, что и shadcn/ui, но другим маршрутом — по одному компоненту за раз и только тогда, когда вы сами этого захотите.

Оговорки очевидны. Это публичная бета на 0.x без стабильной ветки, она требует React 19 и является проектом одного вендора; при запуске обсуждались вопросы управления проектом и долгосрочной поддержки, на которые публично нет ответа. Нестабильность беты — не гипотеза: релиз 0.6.0 ломает всех, кто напрямую вызывает useStepperContext, убирая из этого хука поля компактной раскладки и сужая StepperContextValue до истории переходов и регистрации шагов. С другой стороны, на странице сообщества заявлены официальный Discord и еженедельная сортировка issue на GitHub.

Кому стоит попробовать Astryx сейчас, а кому — подождать?

Пробуйте сейчас, если начинаете с нуля внутренний инструмент или дашборд на React 19, хотите получить доступные компоненты без необходимости проектировать их самостоятельно и у вас есть дизайнер, который предпочтёт владеть токенами, а не ревьюить пул-реквесты с CSS. Подождите, если вы ниже React 19, если вы сопровождаете публичный продукт, где минорный релиз 0.x, меняющий форму контекста, стоил бы вам выпуска, или если управление проектом одним вендором — это вопрос закупок, на который вы пока не можете ответить. Полезный промежуточный вариант — один маршрут существующего приложения: предкомпилированные таблицы стилей, явный порядок @layer и один экран, собранный на компонентах, которые вы иначе написали бы сами.

Оценивать нужно не количество компонентов. Оценивать нужно то, на какую ступень лестницы кастомизации вас загонят требования к дизайну, — потому что именно за это вы будете платить через год. Выберите два компонента, по которым ваш продукт не может идти на компромиссы, выполните для каждого npx @astryxdesign/cli component <Name> и посмотрите, доведут ли вас токены и className до цели раньше, чем извлечение исходного кода.

Часто задаваемые вопросы

В чём разница между Astryx и StyleX?

StyleX — это компилятор CSS-in-JS от Meta, работающий на этапе сборки и превращающий объекты стилей в атомарный CSS без конфликтов имён. Astryx — это дизайн-система из React-компонентов, стили которых написаны с его помощью. Astryx устанавливает @stylexjs/stylex как peer-зависимость, но для использования предкомпилированных таблиц стилей не нужны ни плагин для сборки, ни PostCSS, ни конфигурация Babel. Плагины StyleX из @astryxdesign/build подтягиваются только при сборке из исходников.

Работает ли Astryx с Next.js, Vite или простым подключением через CDN?

Да. README пакета @astryxdesign/core документирует настройку для Next.js, Tailwind, Vite и CDN. На пути с предкомпилированными стилями вы импортируете reset, таблицу стилей компонентов и таблицу стилей темы, а затем оборачиваете приложение в провайдер темы — плагин для бандлера при этом не нужен. Сборка из исходников на TypeScript и StyleX, напротив, требует плагинов Babel, PostCSS или Vite, поставляемых в @astryxdesign/build.

Нужен ли Astryx CLI для использования библиотеки?

Нет. Компоненты и предкомпилированный CSS работают из установленных пакетов сами по себе, а CLI — это dev-зависимость. Он нужен для theme list и theme add, полной документации компонентов, шаблонов, кодмодов обновления и swizzling. Запуск astryx init записывает индекс компонентов Astryx в AGENTS.md или CLAUDE.md, что имеет значение, только если с репозиторием работают AI-агенты.

Готовы ли компоненты графиков Astryx к использованию в продакшене?

Нет. @astryxdesign/vega — обёртка над Vega — и @astryxdesign/charts — библиотека графиков на базе d3 — публикуют реальные сборки в npm только под dist-тегом canary; их тег latest указывает на заглушку, которую npm прямо не рекомендует устанавливать. Экспериментальный пакет @astryxdesign/lab, куда попадают новые компоненты до перехода в core, публикуется точно так же. Таким образом, графики отстают даже от уже находящихся в бете пакетов core версии 0.x и требуют собственного запасного плана.