挑组件库先想清楚要不被绑死：Ark UI 只给逻辑不管长相，React 与 Solid 都能用
做前端最怕两件事：一是组件长什么样被库定死了，想改要覆盖一堆样式；二是框架绑死，哪天从 React 换到 Solid 就得重写。Ark UI 的定位就是「只给行为逻辑、不管长相」的 headless 组件库——你拿到的是无障碍、状态都处理好的组件，外观全交给你自己。
它解决什么问题
组件库自带样式太重，想做成品牌风格要一层层覆盖，改到怀疑人生。
团队想从 React 迁到 Solid，结果现有组件全得推翻重来。
自己手搓无障碍（键盘、焦点、aria）容易漏，出合规问题还难复现。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| Headless 设计 | 只交付交互与状态逻辑，外观与样式完全由你掌控 |
| 多框架适配 | React、Solid、Vue 都有对应封装，迁移成本更低 |
| 状态机驱动 | 底层基于 Zag.js，开合、聚焦等行为稳定可预测 |
| 无障碍内置 | 键盘操作、屏幕阅读器支持按规范处理，省心 |
| 组合式 API | 组件拆成可拼装零件，按需求取用，不臃肿 |
| 开源可查 | 以 MIT 协议开源，源码公开，出问题能翻实现 |
它本质上是把「行为」和「外观」彻底拆开的一层
传统组件库把结构、样式、行为打包在一起，方便但僵硬。Ark UI 反过来：它用 Zag.js 把每个组件的交互状态写成状态机（比如对话框的开与关、下拉的聚焦顺序），再用框架适配器把这些状态接到 React、Solid 或 Vue 上。你写的是自己的 div、自己的 class，组件库只负责「这时候该不该打开」「焦点该去哪」。
好处是样式零束缚，坏处是你得自己把外观做出来——它不送你一套现成皮肤。更适合已经有设计语言、想统一多端体验的团队。另外 Ark UI 是库（npm 安装），不是复制源码的方案，版本升级跟随依赖管理即可，但要注意大版本之间 API 可能调整。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Radix UI | 开源免费 | React 专用 headless 原语，生态成熟，但框架绑定 React。 |
| Headless UI | 开源免费 | Tailwind 团队出品，React 与 Vue 可用，样式约定更紧。 |
| React Aria | 开源免费 | Adobe 出品，无障碍极强，但只服务 React 生态。 |
谁适合用
- 已有设计系统、只缺交互逻辑的前端团队
- 在 React 与 Solid 之间摇摆或计划迁移的项目
- 对无障碍合规有明确要求的对内对外产品
怎么开始
- 用包管理器安装 @ark-ui/react（或对应框架的包）。
- 从官方文档挑需要的组件，把示例代码拷进项目。
- 用自己的样式方案（Tailwind、CSS Modules 等）覆盖外观。
- 按文档接好状态回调，处理开合、选择等交互。
- 用键盘和屏幕阅读器走查一遍无障碍表现。
常见问题
它依赖 Tailwind 吗？
不依赖。Ark UI 是 headless，样式交给你，用 Tailwind、CSS 还是别的都行。
是装库还是复制源码？
是装库，通过 npm 等包管理器引入，跟随依赖升级。
只支持 React 吗？
不是。React、Solid、Vue 都有官方适配，行为一致。
能直接用到生产吗？
可以，它本就面向生产，但外观需自行完成，无障碍也建议实测。
授权与合规
Ark UI 以 MIT 开源协议发布，源码公开，可自由用于商业与个人项目，无需付费。 官网：ark-ui.com。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
↓ 获取资源
点击按钮直接前往资源页面。
