ark

Ark UI 是一个由 Chakra UI 团队维护的开源无头组件库。它为构建设计系统和 Web 应用程序提供无样式的逻辑和无障碍层，将所有视觉样式交给开发者决定。 **核心方法** 该项目将组件行为与外观分离。每个组件在交付时均无默认样式，因此团队可以使用 Tailwind、Panda CSS、Emotion 或 Styled Components 等 CSS-in-JS 方案、CSS Modules 或纯 CSS。其目标是让设计系统作者在继承经过测试的交互和无障碍行为的同时，拥有对呈现方式的完全控制权。 **架构** 组件逻辑基于 Zag.js 有限状态机构建。根据 README 的描述，这带来了可预测且类型安全的狀態转换，使测试和调试更简单，并减少了边缘情况。相同的组件行为通过针对 React、Solid、Vue 和 Svelte 的独立包对外提供，因此设计系统可以在不同框架之间共享同一个 API 界面而无需重写逻辑。这些包完全由 TypeScript 提供类型支持。 **无障碍性** README 指出，组件遵循 WAI-ARIA 设计模式，并经过辅助技术的测试。声称的功能包括适当的 ARIA 属性和角色、键盘导航、焦点管理、屏幕阅读器公告以及 RTL（从右至左）支持。 **组件** Ark UI 宣传拥有 45 多个组件，大致分为以下几类： - 布局与导航：Accordion, Tabs, Splitter, Steps, Tree View, Tour - 覆盖层：Dialog, Popover, Tooltip, Hover Card, Bottom Sheet, Floating Panel - 表单与输入：Checkbox, Radio Group, Select, Combobox, Number Input, Pin Input, Tags Input, Editable, File Upload, Color Picker, Date Picker, Password Input, Signature Pad, Slider, Angle Slider, Rating Group, Switch, Toggle 和 Toggle Group - 数据展示：Avatar, Highlight, Progress, QR Code, Format, JSON Tree View, Marquee - 工具类：Carousel, Clipboard, Collapsible, Field 和 Fieldset, Menu, Pagination, Portal, Presence, Scroll Area, Segment Group, Timer, Toast, Client Only, Download Trigger, Focus Trap, Frame, Collection, Listbox **安装与使用** 每个框架都有自己的 npm 包（`@ark-ui/react`, `@ark-ui/solid`, `@ark-ui/vue`, `@ark-ui/svelte`）。组件按需导入，例如 `@ark-ui/react/dialog`，并由 Root, Trigger, Backdrop, Positioner, Content, Title, Description 和 CloseTrigger 等原语组合而成。README 展示了一个 Dialog 示例，在所有四个框架中渲染的标记几乎完全相同。 **生态系统** Ark UI 是 Chakra UI v3 的基础，README 还提到了基于其构建的有样式组件集 Park UI 和 Tark UI。一个独立的 integrations 文件夹为 AI 辅助开发提供了一个 MCP 服务器。 **文档与社区** 指南、各组件 API 参考、示例和样式方案位于 ark-ui.com。该项目拥有 Discord 社区、用于功能请求的公开 Canny 路线图以及一个博客。通过贡献指南接受贡献，支持则通过文档、Discord 和 GitHub issues 进行。开发资金通过 Open Collective 筹集，项目采用 MIT 许可证发布。