facebook/astryx

这是什么？

核心功能

• 01150 多个无障碍 React 组件，提供完整 TypeScript 类型支持。
• 02七套开箱即用的主题，可通过 CSS 自定义属性定制。
• 03支持暗色模式与品牌级主题。
• 04可用 className 配合 Tailwind、CSS Modules 或普通 CSS 覆盖组件样式。
• 05swizzle 命令可将组件源码导出到项目中自行维护。
• 06提供 CLI，用于查看组件文档、生成模板、脚手架和代码迁移。

适用场景

• 为需要统一且无障碍组件库的 React 应用搭建界面。
• 通过修改主题变量打造品牌化产品界面，而无需 fork 组件。
• 为 AI 编程助手提供有文档说明的组件 API，让其据此构建界面。

快速上手

1. 1

   使用 npm 安装核心包、主题、StyleX 和 CLI

   npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli
2. 2

   按照核心包快速入门配置 CSS 导入和主题提供者

3. 3

   贡献者：启用 Corepack 并在仓库中安装依赖

   corepack enable pnpm install

使用前须知

• !目前处于 Beta 阶段，API 可能会变化。
• !@astryxdesign/vega 和 @astryxdesign/charts 仅提供 @canary 版本，尚无稳定发布。
• !需要 React 19 或更高版本。

标签

常见问题

astryx 是什么？

基于 React 19 与 StyleX 构建的开源设计系统，提供 150 多个无障碍组件、主题和 CLI。 Astryx 是一个开源设计系统，最初在 Meta 内部发展而来，现已对外发布。它以统一的方式提供类型完备的 React 组件、品牌级主题、暗色模式和可直接使用的模板。

astryx 可以免费使用吗？用的什么许可证？

astryx 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

astryx 还在维护吗？

活跃维护中。astryx 最近一次提交是在 2026年10月19日。

astryx 适合用来做什么？

为需要统一且无障碍组件库的 React 应用搭建界面。 通过修改主题变量打造品牌化产品界面，而无需 fork 组件。 为 AI 编程助手提供有文档说明的组件 API，让其据此构建界面。

astryx 怎么安装和运行？

使用 npm 安装核心包、主题、StyleX 和 CLI: npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli 按照核心包快速入门配置 CSS 导入和主题提供者 贡献者：启用 Corepack 并在仓库中安装依赖: corepack enable pnpm install

在哪里获取 astryx？

源代码和安装说明在 GitHub 上：https://github.com/facebook/astryx