Arc UI

文档  ·  组件  ·  安装  ·  AI 和 MCP  ·  Pro

Arc 是一个内置动效的 React 组件和模块库。每个项目都是归你所有的纯源代码：使用一小组设计令牌的 CSS 模块、用于动画的 Motion、键盘支持，以及针对每个动画的减少动效方案。使用 shadcn CLI 安装任何内容，也可以手动复制文件。它适用于 Next.js 和 Vite，可搭配或不搭配 Tailwind 使用。本仓库包含免费开源部分：119 个组件和 22 个模块，以及它们共用的设计和动效令牌。所有内容都可在 uiarc.dev 上实时预览。

展示

这里精选了一些作品，均来自 uiarc.dev 的实时录制。标有 ^Pro 的项目属于 Arc Pro，不包含在本仓库中；其他所有项目都可以在这里免费安装。

封面流 Pro 可抛掷的照片深度轨道，搭配柔和的落地阴影和静谧的倒影。	环形图 弧线在不同数据集之间变形，总数滚动至中心。
计费切换 月付和年付价格相互滚动切换，并显示节省金额。	轨道徽标 Pro 集成服务围绕你的产品标识运行。可按类别筛选。
钱包卡片堆 Pro 展开一叠卡片，抽出一张即可查看其活动记录。	折线图 切换时间范围，折线便会根据上一周期重新绘制。
数字输入框 带边界的步进控件，达到上限时会给出提示。	活动圆环 Pro 每日目标进度扫过、计数递增，并在超过 100% 后再描绘一圈。

• 展示
• 安装
  • 要求
  • 使用 shadcn CLI
  • 复制并粘贴
• 用法
• 主题
• 组件
• 区块
• AI 工具
• 故障排除
• 发布流程
• 仓库结构
• Arc Pro
• 贡献
• 许可证

安装

要求

• React 19 和 TypeScript。源码可在 strict、noUncheckedIndexedAccess 和 verbatimModuleSyntax 模式下编译，并且需要 lib ES2023 或更高版本（少数项目使用了 findLast）
• Next.js（App Router）或 Vite
• 动画需要 motion。部分项目还会用到 lucide-react 或 Radix UI 原语；CLI 会安装项目所需的依赖。
• @/* 导入别名（Next.js 和 shadcn 默认会配置）

不需要 Tailwind。Arc 样式使用读取 CSS 变量的 CSS 模块。

使用 shadcn CLI

在 components.json 中注册一次 @uiarc 命名空间：

{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json"
  }
}

然后按名称添加项目。区块中的组件等本地依赖也会自动一并安装：

npx shadcn@latest add @uiarc/button @uiarc/dialog

每个项目也可以通过完整 URL 安装，无需修改 components.json：

npx shadcn@latest add https://uiarc.dev/r/button.json

每个应用只需安装一次设计令牌：运行 npx shadcn@latest add @uiarc/arc-foundation，然后在应用根目录导入。组件只会引入 motion 预设（arc-motion-tokens），不会重新安装 foundation.css，因此也可以将这些令牌放在自己的主题包中。

// app/layout.tsx (Next.js) or src/main.tsx (Vite)
import "@/components/arc/foundation.css";

npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

npm create vite@latest my-app -- --template react-ts
cd my-app
npx shadcn@latest init

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

import path from "node:path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
});

复制并粘贴

1. 安装共享包：npm install motion lucide-react。
2. 将此仓库中的 registry/foundation.css、registry/motion-tokens.ts 和 lib/motion-tokens.ts 复制到 @/ 根目录下相同的路径，并在根目录导入一次 CSS。
3. 从 registry/components/<id>/ 或 registry/blocks/<id>/ 复制项目文件夹，并保留路径。复制的文件会保留此仓库的结构，并通过 @/ 相互导入；上方的 CLI 安装命令会替你重写这些路径。它的 public/r/<id>.json 文件列出了所需的每个文件和 npm 包。

uiarc.dev 上的每个页面也都有一个 Manual 选项卡，其中列出了确切的文件。

用法

CLI 会将每个文件放在 components.json 中 components 别名对应的 arc/ 文件夹下，例如 components/arc/button/button.tsx；如果是 src/ 项目或 monorepo 包，则放在 src/components/arc/…。Arc 文件通过相对路径相互导入，因此任何别名配置都适用；如果想放到其他位置，可以整体移动 arc/ 文件夹。像使用任何本地组件一样使用它们：

import { Button } from "@/components/arc/button/button";

export default function Page() {
  return <Button>Save changes</Button>;
}

代码归你所有：可以编辑、重命名和移动。无需同步运行时包。

主题

组件读取语义化令牌，而不是原始颜色。在 foundation.css 中更改令牌（通过 CLI 安装后为 components/arc/foundation.css），所有组件都会在两种主题下同步更新。

• 深色模式： 在 <html> 上设置 data-theme="dark"。深色模式的值经过单独调校，而非简单反转。
• 强调色： 在 <html> 上将 data-accent 设置为 neutral、violet、blue、green、amber、orange、coral 或 rose。
• 动效： 弹簧和持续时间配置在 lib/motion-tokens.ts 中（通过 CLI 安装后为 components/arc/lib/motion-tokens.ts）。所有动画都会遵循 prefers-reduced-motion。

更多内容请参阅主题文档和动效文档。

组件

119 个免费组件，分组方式与网站一致。点击名称即可查看实时预览和文档。

操作 (20) · 输入 (37) · 折叠 (14) · 反馈 (11) · 数据 (32) · 文本 (4) · 特殊 (1)

操作

按钮

手势

菜单

主题

输入

文本字段

特殊输入

选择器

切换控件

滑块

选择器

编辑器

披露

导航

展开

叠加层

反馈

消息

进度

数据

头像

卡片

图表

表格

活动

媒体

文本

文本效果

特殊

文字

区块

22 个免费区块：使用 Arc 组件构建的完整版块和屏幕。

应用外壳

身份验证

定价

媒体

主视觉区

功能

社会认同

内容

页眉和页脚

AI 工具

Arc 专为通过 AI 编码工具使用而构建。

• MCP 服务： https://uiarc.dev/api/mcp（Streamable HTTP，免费内容无需密钥）。可通过 Claude Code、Cursor、VS Code 或 Codex 搜索、阅读文档并获取源代码。

  claude mcp add --transport http arc https://uiarc.dev/api/mcp
  

• llms.txt： https://uiarc.dev/llms.txt 提供索引；llms-full.txt 在一个文件中包含所有内容。

• Markdown 文档： 每个页面都有对应的 Markdown 版本，位于 /components/<id>/markdown。

各客户端的设置方法见 AI 和 MCP 文档。

故障排除

"use client";
import Image from "next/image";
import Link from "next/link";
import { ArcProvider } from "@/components/arc/lib/arc-provider";

export function Providers({ children }: { children: React.ReactNode }) {
  return <ArcProvider link={Link} image={Image}>{children}</ArcProvider>;
}

发布流程

新的免费组件和区块会定期少量发布。每次发布都会同时更新此仓库、@uiarc 注册表和更新日志，因此此处的代码始终与 CLI 安装的内容一致。关注或为仓库加星，即可了解新内容。

仓库结构

registry/foundation.css      design tokens, light and dark themes
registry/motion-tokens.ts    motion presets
lib/motion-tokens.ts         motion presets, shared path
lib/                         small shared helpers
registry/components/<id>/    components
registry/blocks/<id>/        blocks
registry.json                shadcn registry index
public/r/<id>.json           prebuilt registry items, one per component or block

Arc Pro

Arc Pro 在此库基础上增加了 156 个组件和区块：包括上文的 Cover flow 等画廊、钱包和金融界面、更丰富的图表，以及完整的产品页面。它们遵循与此处所有内容相同的规则：由你掌控的纯源代码、支持两种主题、支持键盘操作，并提供减少动态效果的模式。

• 每个 Pro 组件和区块的源代码，可通过个人令牌使用相同的 shadcn CLI 安装，也可通过 MCP 服务安装
• 每次 Pro 发布的所有新内容，以及你已有组件和区块的修复与更新
• 按年订阅，或一次付款获得终身使用权。请参阅定价

此仓库中的所有内容都保持免费，并采用 MIT 许可。

贡献

欢迎提交 Bug 报告、修复和组件创意。请先阅读 CONTRIBUTING.md，并遵守行为准则。如需报告安全问题，请参阅 SECURITY.md。

许可证

MIT © 2026 Elia Kuratli