astryx-vue

介绍 ​

astryx-vue 是用 Vue 3 重新实现的开源组件库，视觉规范来自 Meta 的 Astryx 设计系统。原版文档在 https://astryx.atmeta.com，用 React 19 和 StyleX 开发。本项目由开源社区独立维护，让 Vue 开发者不用换技术栈，就能直接用上这套现代界面。

我们是怎么做的 ​

我们并不是在 React 组件外面套一层壳，而是用 Vue 3 把整套界面的质感、排版与工程规范从底层重新做了一遍。组件库严格对齐原版的四个基础：

  1. 设计变量（Tokens）：统一间距、圆角和字号，改一处地方，所有组件都跟着生效。
  2. CSS 变量系统：原生支持 light-dark()，不用写两套样式表，就能在浅色和深色之间切换，也方便层层覆盖。
  3. 动效（Motion）：带有自然的过渡节奏；用户在系统里开启「减少动效」时，会自动收起大幅位移，保护阅读体验。
  4. 常用组件：从小按钮、图标，到整套 AI 对话窗口和后台布局，常用的界面都有准备。

所有组件完全按照 Vue 3 的标准习惯来写：支持标准的 Props、事件、插槽、v-model 和组合式函数（Composables）。不需要任何多余的转换胶水层，代码打包出来干净小巧。

两个包各司其职 ​

项目拆成了两个清晰的包，各管各的事：

  • @astryx-vue/core：核心组件库，里面是所有 Vue 组件、常用工具函数（Composables）和组件骨架样式。
  • @astryx-vue/themes：主题包，提供 Neutral 等配色变量和字体排版规则。

所有样式都用现代标准 CSS 编写，你的项目不需要引入 StyleX，也不需要配置专门的 CSS 编译器。

图标与成套界面 ​

组件库本身不强行捆绑任何一套体积庞大的图标库。像 IconButton（图标按钮）或 NavItem（导航项）这样需要放图标的地方，支持直接传 CSS 类名。你可以选择自己喜欢的方案，无论是 UnoCSS presetIcons、Tailwind、Iconify 还是自己手写的 SVG，都能放进去。

对于平时常用的 AI 与协作界面，我们还准备好了成套的组合模式。比如 Chat（连续对话流）、Citation（参考来源标记）和 Markdown（长文排版渲染），不用你再从零开始到处拼装零件。

和原版的差别 ​

绝大部分组件和原版一一对应。下面是本仓库额外加的、原版没有的能力。它们都默认关闭，或者不影响原有行为。

特性入口说明
自绘滚动条ScrollbarsProvider在应用外层套一层，滚动组件就从原生滚动条换成覆盖式的细滚动条。不套就没有任何变化，也不会多打包任何代码。

以后新增扩展能力，会继续加在这张表里。

当前所有公开可用的功能，请以仓库实际导出的内容为准。核心样式与组件都遵循原生 Web 标准与现代 Vue 3 规范打造。