meta/astryx

项目介绍

Astryx 是一套基于 React 19+ 和 StyleX 的开源设计系统，目前处于 Beta 阶段，采用 MIT 许可证。它源自 Meta 内部八年的积累，现在对外发布，包含 150+ 可访问组件、品牌级主题、暗色模式、开箱模板和 CLI，并作为一个整体系统提供 (20)。

设计上强调内部开放：基础构建块直接导出，需要深入时可用 swizzle 把组件源码抽到项目里。样式虽然用 StyleX 编写，但消费方无感知，可以用 className 配合 Tailwind、CSS modules 或普通 CSS 覆盖。主题是一组 CSS 自定义属性覆盖，因此定制不需要包装或 fork 组件。API、文档和 CLI 被有意设计成一致的一套参考，让人和 AI 助手以同样方式构建 (20)。

它适合想用现成组件库、又不想绑定某套样式方案或引入构建插件的 React 团队。

快速使用

Astryx 要求 React 19 或更高版本，react 和 react-dom 是 peer 依赖。安装核心包、一套主题、其 peer 依赖以及 CLI (21)：

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

也可以全局安装 CLI，让 astryx 在任何目录可用，方便编码代理识别；在项目内它仍会运行项目自己的版本 (23)：

npm i -g @astryxdesign/cli

最简配置只需要少量 CSS 导入加一个主题 Provider，无需构建插件，也无需 PostCSS 或 Babel 配置。core 包 README 给出了 Next.js、Tailwind、Vite 和 CDN 的完整指南。为了让 AI 助手和新开发者调用 CLI 时路径稳定，可以在 package.json 中加一个脚本 (25)：

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

之后运行 npm run astryx -- component --list 即可列出组件。

包结构

系统分为四组已发布内容：@astryxdesign/core 提供组件、主题和工具；@astryxdesign/cli 提供文档、模板、脚手架、主题和 codemod；@astryxdesign/build 提供 StyleX 源码构建插件；另外还有七套现成主题（neutral、butter、chocolate、matcha、stone、gothic、y2k）(26)。实验性的 lab 组件仅在内部使用；Vega 图表封装和图表组件只以 @canary dist-tag 发布，尚无稳定版本。

使用约束

• 需要 React 19 或更高版本，不支持更旧的 React。
• 项目处于 Beta 阶段，API 仍可能变化。
• 样式用 StyleX 编写，但不要求消费方采用 StyleX；覆盖样式可通过 className 配合 Tailwind、CSS modules 或普通 CSS 完成。
• 参与贡献需要 Node 22+ 的活跃 LTS 版本和 pnpm 11；文档给出的引导方式是 corepack enable && pnpm install (48)。
• 图表包没有稳定版本，只有 @canary dist-tag。

HotRepo 点评

2026-11-06，Astryx 记录到 14,022 个 Star 和 1,162 个 Fork，当日窗口新增 181 个 Star，位列 TypeScript 日榜第 7。对一个 Beta 阶段的设计系统来说，这是很强的单日表现；但单次快照只能说明当天名次，不足以判断趋势。更值得注意的是它在 API、文档和 CLI 上把人和代理的工作流成对设计，这在组件库中并不常见，值得随着 Beta 推进继续观察。