astryx 是什么?

Astryx 是 Meta 开源的 React 设计系统,提供 150 多个可访问组件、主题、模板和 CLI。组件样式以预构建 CSS 交付,使用方可以继续用 Tailwind、CSS Modules 或普通 CSS 覆盖。

⭐ 8,003 Stars 🍴 681 Forks TypeScript MIT 作者: facebook
来源:github.com/facebook/astryx/blob/main/README.md 查看 GitHub 仓库 → 📘 使用教程 →

为什么值得关注

这些数值只用于判断持续需求,不能当作去重访客数。官方资料显示它来自 Meta 内部使用多年的设计系统,并把组件、主题、模板和 CLI 一起开放,这比单纯的组件包覆盖面更广。

来源:github.com/facebook/astryx/blob/main/README.md

核心功能

完整组件与模式层

官方 README 列出 150 多个组件,并把基础样式、组件和常用交互模式分层组织;React API 带 TypeScript 类型。

来源:github.com/facebook/astryx/blob/main/README.md
CSS 变量主题

主题通过 CSS 自定义属性覆盖,官方提供 neutral、butter、chocolate、matcha、stone、gothic 和 y2k 等主题包。

来源:github.com/facebook/astryx/blob/main/README.md
面向人和 Agent 的 CLI

CLI 可以查询组件文档、初始化项目、构建主题、执行 codemod,并用 swizzle 把组件源码复制到项目中接管。

来源:github.com/facebook/astryx/blob/main/packages/core/README.md

技术架构

仓库是 pnpm monorepo:apps 放文档站、Storybook 和示例,packages 放 core、CLI、build 与主题包,internal 放测试和开发工具。使用方通常安装 core、一个主题和 StyleX 运行依赖,按 reset.css、astryx.css、theme.css 的顺序导入预构建样式,再用 Theme 包裹应用。

来源:github.com/facebook/astryx/blob/main/README.md;https://github.com/fac…

项目知识图谱

知识图谱:项目核心节点(中心)+ 核心功能(内环六边形)+ 关键技术依赖(外环 chip) @astryxdesign/core@astryxdesign/… @astryxdesign/theme-neutral@astryxdesign/… @stylexjs/stylex@stylexjs/styl… @astryxdesign/cli@astryxdesign/… 完整组件与模式层 CSS 变量主题 面向人和 Agent 的 CLI astryx 项目本体 核心功能 关键依赖

技术栈

语言TypeScript框架React 19+;StyleX 用于项目自身样式生产,使用方消费预构建 CSS
@astryxdesign/core@astryxdesign/theme-neutral@stylexjs/stylex@astryxdesign/cli
pnpm 11 monorepo;官方贡献指南要求 Node.js 22+ 的活跃 LTS 与 pnpm 11
来源:github.com/facebook/astryx/blob/main/packages/core/README.md;https://…

快速上手

在现有 React 19+ 项目运行 npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex;需要 CLI 时再运行 npm install -D @astryxdesign/cli。CSS 依次导入 @astryxdesign/core/reset.css、@astryxdesign/core/astryx.css、@astryxdesign/theme-neutral/theme.css,并按官方 core README 配置 Theme 和 LinkProvider。可先运行 npx @astryxdesign/cli component --list 检查 CLI。
来源:github.com/facebook/astryx/blob/main/packages/core/README.md

使用场景

适合 React 19 项目统一组件、主题和页面模式,也适合希望 Agent 与开发者使用同一套组件文档和 CLI 的团队。若只需要无样式的交互原语,完整设计系统可能偏重。

来源:github.com/facebook/astryx/blob/main/README.md

优势与局限

优势

  • 组件、主题、模板和 CLI 在同一套约定中维护
  • 使用方不需要引入 StyleX 构建插件,可以继续使用现有 CSS 方案
  • MIT 许可,组件内部和 swizzle 路径公开

局限

  • 官方仍把项目标为 Beta
  • React 版本要求为 19 或更高
  • lab 包不发布到 npm,vega 和 charts 当前只有 canary 标签,没有稳定版
来源:github.com/facebook/astryx/blob/main/README.md;https://github.com/fac…

最新版本

GitHub Releases 在 2026-09-23 核对时把 v0.6.2(2026-09-15)标为 Latest;该版本让全部 @astryxdesign/* 包统一到 0.6.2,并为 Markdown 增加可选数学公式渲染器。升级前运行 npx astryx upgrade --apply,并复查最新 release notes。

来源:github.com/facebook/astryx/releases/tag/v0.6.2

实测与证据

status: docs_only_official_sources_checked_not_installed  |  checked_at: 2026-09-23  |  environment: 只阅读 facebook/astryx 官方 README、core README、CONTRIBUTING 与 GitHub Releases;未下载或运行项目代码  |  limitations: 没有在本机创建 React 应用、安装 npm 包、运行 Storybook 或执行 CLI,因此不声称安装成功、组件渲染正常或无版本冲突。  |  observed_output: 官方 core README 当前写明 React 19+,安装包为 core、theme-neutral 和 @stylexjs/stylex;GitHub Releases 把 v0.6.2 标为 Latest。

来源:github.com/facebook/astryx/blob/main/packages/core/README.md;https://…

同类项目对比

相比 Radix Primitives,Astryx 更接近可直接使用的完整设计系统:它提供预构建视觉样式、多个主题、模板和 CLI。Radix 官方定位是构建设计系统的无样式、可组合、可访问原语,视觉层主要由使用方完成。需要统一成品界面时 Astryx 更省装配工作;需要完全自定义视觉且只要交互基础时 Radix 更轻。

来源:github.com/facebook/astryx/blob/main/README.md;https://github.com/rad…

总结评价

Astryx 适合已经采用 React 19、希望组件、主题、页面模式和 Agent 工具统一的团队。它仍是 Beta,而且实验包与图表包没有稳定发布;先在独立页面验证样式层叠、主题和无障碍行为,再决定是否扩大使用范围。

来源:github.com/facebook/astryx/blob/main/README.md

常见问题

Astryx 对 React 版本有什么要求?

官方 core README 当前要求 React 和 react-dom 19.0.0 或更高;接入旧项目之前应先检查 React 升级成本。

使用 Astryx 必须给项目配置 StyleX 构建插件吗?

普通使用不需要。官方说明 core 包交付预构建 CSS 和 JavaScript;按顺序导入 reset、组件和主题 CSS 即可。

Astryx CLI 可以做什么?

它可以查询组件文档、初始化项目、构建主题、运行升级 codemod,并用 swizzle 把组件源码复制进项目。

Astryx 的 charts 和 lab 包是稳定发布吗?

不是。官方 README 说明 lab 只供仓库内部 Storybook 和 sandbox 使用,不发布到 npm;vega 和 charts 目前只有 canary 标签。

资料与核验范围
本文依据项目公开资料整理。版本、安装命令和功能边界可能随上游更新,请以所列来源和项目当前版本为准。 资料核对时间: 2026-09-23 13:55.

参考材料:README、GitHub API、依赖文件