# @arun-dev/ui 中文文档

规范地址：https://npmcn.com/package/%40arun-dev/ui/

版本：5\.14\.2
npm 元数据更新时间：2026-10-10T14:10:03.929Z
中文译文更新时间：2026-11-08T09:33:19.454Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40arun-dev/ui
原文对照：https://npmcn.com/package/%40arun-dev/ui/?lang=original
源码仓库：https://github.com/arun9483/arun-design-system

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：516 kB，540 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=19\.0\.0，react-dom \>=19\.0\.0，@arun-dev/headless \>=4\.28\.0
- 首次发布：2026-06-10T18:35:17.613Z
- 最新版本发布：2026-10-10T14:10:03.476Z
- 近 30 天下载量：1832（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：57（近 12 个月 57 个）

## 中文简介

品牌不可知论 完全通过 @arun-dev/tokens 语义化 CSS 自定义属性格式化的反应组件库

## 安装

```sh
npm install @arun-dev/ui
```

也可以使用：`pnpm add @arun-dev/ui`、`yarn add @arun-dev/ui`、`bun add @arun-dev/ui`

## README

# @ arun-dev/ ui (英语)

品牌不可知论 反应组件库. 组件没有自己的颜色——所有视觉 样式解析通过语义 CSS 自定义属性从 [`@arun-dev/tokens`](https://www.npmjs.com/package/@arun-dev/tokens)。 。 。 .

## 安装

```bash
npm install @arun-dev/ui @arun-dev/tokens
```

同伴依赖性 : `react >= 19`, (中文(简体) ), `react-dom >= 19`。 。 。 .

## 设置——需要符号

组件读取语义符号( E)`--color-bg-*`, (中文(简体) ), `--color-text-*`, (中文(简体) ), `--color-border-*`,(...)时 提供时间。 在任何组件制成前, 装入一次符号和组件样式 :

```ts
import '@arun-dev/tokens/base'; // primitives + default brand
import '@arun-dev/ui/components.css'; // all component styles
```

要使用另一个品牌,请更换品牌层:用已公布的 `@arun-dev/tokens/brands/arun`,或者你自己的样式表—— 由 `createBrand()` 从 `@arun-dev/tokens/createBrand`或者手写 任意 品牌 CSS 必须定义 `BrandSemanticContract` 类型.

单个样式表也会导出, 如果您喜欢按位加载: 每个组件一个, 以它命名 `@arun-dev/ui/css/dialog`, (中文(简体) ), `…/css/range-slider`, (中文(简体) ), `…/css/fieldset` 与 按钮是 `…/css/btn`附加时 `…/css/reset`, (中文(简体) ), `…/css/metric` 财务报告和审定财务报表 `…/css/utilities`。 。 。 .

## 构成部分

```tsx
import { Button, Field, Dialog, RangeSlider } from '@arun-dev/ui';
```

每个组件、道具和活生生的例子都在 [文档网站](https://arun9483.github.io/arun-design-system/),并按此处分类:

| 组 | 构成部分 |
| --- | --- |
| 表单 | `Calendar`, (中文(简体) ), `RangeCalendar`, (中文(简体) ), `Checkbox`, (中文(简体) ), `Combobox`, (中文(简体) ), `DatePicker`, (中文(简体) ), `DateRangePicker`, (中文(简体) ), `Field`, (中文(简体) ), `Input`, (中文(简体) ), `OtpInput`, (中文(简体) ), `RadioGroup`, (中文(简体) ), `RangeSlider`, (中文(简体) ), `Select`, (中文(简体) ), `Slider`, (中文(简体) ), `Switch`, (中文(简体) ), `Textarea` |
| 行动 | `Button`, (中文(简体) ), `Menu`, (中文(简体) ), `Menubar`, (中文(简体) ), `Toggle`, (中文(简体) ), `ToggleGroup`, (中文(简体) ), `Toolbar` |
| 导航 | `Breadcrumb`, (中文(简体) ), `Link`, (中文(简体) ), `Pagination`, (中文(简体) ), `Stepper`, (中文(简体) ), `Tabs`, (中文(简体) ), `TreeView` |
| 重叠 | `Dialog`, (中文(简体) ), `Drawer`, (中文(简体) ), `HoverCard`, (中文(简体) ), `Popover`, (中文(简体) ), `Tooltip` |
| 反馈 | `Alert`, (中文(简体) ), `Meter`, (中文(简体) ), `Progress`, (中文(简体) ), `Skeleton`, (中文(简体) ), `Spinner`, (中文(简体) ), `Toast` |
| 数据显示 | `Accordion`, (中文(简体) ), `Avatar`, (中文(简体) ), `Badge`, (中文(简体) ), `Card`, (中文(简体) ), `Chip`, (中文(简体) ), `Kbd`, (中文(简体) ), `Table` |
| 布局和打字 | `Grid`, (中文(简体) ), `Heading`, (中文(简体) ), `Paragraph`, (中文(简体) ), `Separator`, (中文(简体) ), `Stack`, (中文(简体) ), `Text` |

软件包定义的组件的道具类型会导出—— `ButtonProps`, (中文(简体) ), `CardProps`, (中文(简体) ), `BadgeProps` 和其余的——以及诸如 `ButtonVariant` 财务报告和审定财务报表 `BadgeTone`。 。 。 . 由 [`@arun-dev/headless`](https://www.npmjs.com/package/@arun-dev/headless) —— 说 `Switch`, (中文(简体) ), `Dialog`, (中文(简体) ), `Menu`, (中文(简体) ), `RangeSlider` 以及其他有名的——取出道具类型; 以 `ComponentProps<typeof Switch.Root>`。 。 。 .

每个部分还接受:

-   **`className`** ——与该部分自己的班级相配合,从不取而代之.
-   **`render`** ——要制成的元素或组件而不是默认. 辅料, `className`, (中文(简体) ), 事件处理器和 `ref` 被合并到它上。 它自己的道具赢了, `children` 包括:一个要素 没有自己的孩子 拿走了这个部分, 一个宣布儿童保留他们.
-   **`ref`** - 与任何法官合并 `render` 键.
-   **任何其他道具** ——分到已变出元素上,所以 `id`, (中文(简体) ), `aria-*`, (中文(简体) ), `data-*` 活动 处理器全部到达DOM.

```tsx
<Chip render={<li />}>React</Chip>
<Card render={<article />} lift>…</Card>
```

## 他们

光和暗模式来自符号层——默认情况下的系统偏好,明确覆盖 通过 `data-theme="dark"` 编号 : `data-theme="light"` 在根点上。 组件无需更改.

## 常见问题

### @arun-dev/ui 是什么？

品牌不可知论 完全通过 @arun-dev/tokens 语义化 CSS 自定义属性格式化的反应组件库

### 如何安装 @arun-dev/ui？

在项目目录运行 npm install @arun-dev/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.0\.0）、react-dom（\>=19\.0\.0）、@arun-dev/headless（\>=4\.28\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @arun-dev/ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @arun-dev/ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @arun-dev/ui 可以商用吗？

@arun-dev/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @arun-dev/ui 的下载量有多少？

根据 npm 官方下载统计，@arun-dev/ui 在 2026/10/07 – 2026/11/05 这 30 天内被下载 1,832 次，日均约 61 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @arun-dev/ui 还在维护吗？

最新版本 5\.14\.2 发布于 2026/10/10（28 天前）；至今共发布 57 个版本，其中过去 12 个月发布了 57 个；首次发布于 2026/06/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。