Библиотека доступных React-компонентов и дизайн-система для быстрой разработки веб-приложений с поддержкой тёмной темы и Next.js RSC.
meta/astryx
Открытая дизайн-система для React: более 150 доступных компонентов, темы и CLI на базе React 19 и StyleX.
- Звёзды
- 14,332
- Форки
- 1,178
- Открытые issues
- 526
- Последний коммит
- 5 часов назад
Что это?
Astryx — открытая дизайн-система, созданная в Meta и теперь доступная для внешнего использования. В неё входят типизированные React-компоненты, брендовая темизация, тёмный режим и готовые к запуску шаблоны.
Достаточно подключить готовый CSS и провайдер темы, а затем использовать компоненты напрямую — плагины для сборки не нужны. Стили написаны на StyleX, но скрыты от пользователей библиотеки: компоненты можно переопределять через className с помощью Tailwind, CSS Modules или обычного CSS. Темы представляют собой набор переопределений CSS custom properties, поэтому их можно настраивать без форка исходного кода компонентов.
В проект также входит CLI для работы с документацией компонентов, шаблонами, заготовками проектов и codemod-скриптами. API и документация устроены так, чтобы с ними могли работать и разработчики, и AI-ассистенты. Проект пока находится в бета-версии и требует React 19 или новее.
Ключевые возможности
- 01Более 150 доступных React-компонентов с полной поддержкой TypeScript.
- 02Семь готовых тем, которые можно настраивать через CSS custom properties.
- 03Тёмный режим и брендовая темизация.
- 04Компоненты можно переопределять через className с помощью Tailwind, CSS Modules или обычного CSS.
- 05Команда swizzle переносит исходный код компонента в ваш проект.
- 06CLI для документации компонентов, шаблонов, заготовок проектов и codemod-скриптов.
Сценарии использования
- Создание React-приложения, которому нужна единообразная библиотека доступных компонентов.
- Создание фирменного интерфейса продукта за счёт настройки переменных темы вместо форка компонентов.
- Предоставление AI-ассистентам для написания кода документированного API компонентов, на основе которого они смогут создавать интерфейсы.
Быстрый старт
- 1
Установите core, тему, StyleX и CLI с помощью npm
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli - 2
Следуйте краткому руководству пакета core по импорту CSS и настройке провайдера темы
- 3
Для участников проекта: включите Corepack и установите зависимости в репозитории
corepack enable pnpm install
Что важно знать
- Сейчас продукт находится в бета-версии, поэтому API может измениться.
- Для опубликованных пакетов @astryxdesign/vega и @astryxdesign/charts доступны только релизы @canary; стабильной версии пока нет.
- Требуется React 19 или новее.
В подборках
Темы
Частые вопросы
- Что такое astryx?
- Открытая дизайн-система для React: более 150 доступных компонентов, темы и CLI на базе React 19 и StyleX. Astryx — открытая дизайн-система, созданная в Meta и теперь доступная для внешнего использования. В неё входят типизированные React-компоненты, брендовая темизация, тёмный режим и готовые к запуску шаблоны.
- astryx можно использовать бесплатно? Какая у него лицензия?
- astryx распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- astryx всё ещё поддерживается?
- Активно поддерживается. Последний коммит в astryx — 7 нояб. 2026 г..
- Для чего можно использовать astryx?
- Создание React-приложения, которому нужна единообразная библиотека доступных компонентов. Создание фирменного интерфейса продукта за счёт настройки переменных темы вместо форка компонентов. Предоставление AI-ассистентам для написания кода документированного API компонентов, на основе которого они смогут создавать интерфейсы.
- Как установить astryx?
- Установите core, тему, StyleX и CLI с помощью npm: npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli Следуйте краткому руководству пакета core по импорту CSS и настройке провайдера темы Для участников проекта: включите Corepack и установите зависимости в репозитории: corepack enable pnpm install
- Где скачать astryx?
- Исходный код и инструкции по установке — на GitHub: https://github.com/meta/astryx
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Открытый набор нестилизованных и доступных примитивов UI для React — основа для дизайн-систем и веб-приложений.
Библиотека React-компонентов без стилей: доступные UI-примитивы для создания собственных дизайн-систем.
Неофициальный порт shadcn/ui для Svelte: доступные настраиваемые компоненты, исходный код которых можно скопировать в своё приложение.
Библиотека UI-компонентов для React: более 60 готовых компонентов, настраиваемые токены дизайна и типы TypeScript на основе системы Arco Design.
Корпоративная библиотека React-компонентов для внутренних веб-систем, которая помогает дизайнерам и фронтенд-разработчикам работать с общей темой оформления.