ITADN · 发现全球开源项目

使用无样式、可访问的 UI 组件构建可扩展的设计系统

概述

Ark UI 是一个无头组件库，为构建高质量、可访问的设计系统和 Web 应用程序提供基础。基于 Zag.js 状态机构建，Ark UI 提供健壮的、框架无关的组件逻辑，并在 React、Solid、Vue 和 Svelte 之间实现完美一致性。

为什么选择 Ark UI？

🎨 完全无样式 - 零样式观点。使用 CSS-in-JS、Tailwind、原生 CSS 或任何样式解决方案带来你自己的样式
♿️ 可访问性优先 - 开箱即用的 WCAG 合规组件，使用真实的辅助技术进行测试
🔄 状态机驱动 - 由 Zag.js 有限状态机驱动的可预测、可测试的行为
🌍 多框架支持 - 在 React、Solid、Vue 和 Svelte 中拥有相同的 API - 编写一次，随处使用
📦 真正可组合 - 无缝协作的细粒度组件原语
⚡️ 生产就绪 - 在 Chakra UI 等产品中经过实战考验，被 OVHCloud、PluralSight 等团队使用
🎯 类型安全 - 完全使用 TypeScript 进行类型定义，提供卓越的开发者体验

安装

选择你的框架并安装相应的包：

# React
npm install @ark-ui/react

# Solid
npm install @ark-ui/solid

# Vue
npm install @ark-ui/vue

# Svelte
npm install @ark-ui/svelte

快速开始

下面是一个简单的示例，展示了 API 在不同框架之间的一致性：

React

import { Dialog } from '@ark-ui/react/dialog'

export const MyDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
)

Vue

<script setup lang="ts">
import { Dialog } from '@ark-ui/vue/dialog'
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
</template>

固体

import { Dialog } from '@ark-ui/solid/dialog'

export const MyDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
)

Svelte

<script lang="ts">
  import { Dialog } from '@ark-ui/svelte/dialog'
</script>

<Dialog.Root>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.Title>Dialog Title</Dialog.Title>
      <Dialog.Description>Dialog description</Dialog.Description>
      <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

特性

零样式自由

每个组件均完全无样式，赋予您对设计的完全控制权。可使用任意样式方案：

// Tailwind CSS
<Dialog.Trigger className="px-4 py-2 bg-blue-500 rounded">Open</Dialog.Trigger>

// CSS-in-JS
<Dialog.Trigger css={{ padding: '8px 16px', background: 'blue' }}>Open</Dialog.Trigger>

// Vanilla CSS
<Dialog.Trigger className="my-button">Open</Dialog.Trigger>

内置无障碍功能

所有组件均遵循 WAI-ARIA 设计模式，并经过屏幕阅读器测试：

✅ 正确的 ARIA 属性和角色
✅ 键盘导航支持
✅ 焦点管理
✅ 屏幕阅读器播报
✅ RTL 支持

状态机架构

由 Zag.js 提供支持，每个组件使用有限状态机以实现可预测的行为：

🔒 类型安全的状态转换
🧪 更易于测试和调试
🐛 更少的边界情况和错误
📊 可可视化的组件逻辑

框架一致性

在多个框架中维护单一设计系统，而无需重写组件逻辑：

// Same API, same behavior, different frameworks
const packages = ['@ark-ui/react', '@ark-ui/solid', '@ark-ui/vue', '@ark-ui/svelte']

组件

Ark UI 提供 45+ 个生产就绪组件，涵盖常见的 UI 模式：

布局与导航

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

查看所有组件 →

文档

访问 ark-ui.com 以获取：

📖 全面的指南和教程
📚 每个组件的详细 API 参考
💡 交互式示例和配方
🎓 流行框架的样式指南
🔧 TypeScript 使用模式

生态系统

基于 Ark UI 构建

Chakra UI v3 - 一个简单、模块化的组件库
Park UI - 使用 Ark UI 和 Panda CSS 构建的精美设计组件
Tark UI - 使用 Tailwind CSS 样式的 Ark UI 组件

样式库

Ark UI 可与以下库无缝配合使用：

Panda CSS
Tailwind CSS
Styled Components
Emotion
原生 CSS、CSS Modules 等

开发者工具

MCP Server - 使用 Claude 及其他 AI 代理进行 AI 辅助开发

社区

💬 Discord - 加入我们的社区以获取帮助和参与讨论
🐦 Twitter - 关注我们以获取更新和公告
🗺️ Roadmap - 请求功能并对即将开展的工作进行投票
📝 Blog - 阅读有关版本发布和技术深度解析的文章

贡献

我们欢迎贡献！请阅读我们的贡献指南以了解：

搭建你的开发环境
我们的开发工作流
代码规范与标准
如何提交拉取请求

支持

📚 查阅我们的文档
💬 在 Discord 上提问
🐛 通过 GitHub Issues 报告 bug
💡 在我们的 Roadmap 上请求功能

赞助者

Ark UI 由 Christian Schröter、 Segun Adebayo 以及 Chakra UI 团队维护。开发工作得到了我们出色的赞助者的支持：

成为赞助商 →

许可证

由 Ark UI 社区用 ❤️ 制作