# @danxbot/ui 中文文档

规范地址：https://npmcn.com/package/%40danxbot/ui/

版本：35\.1\.0
npm 元数据更新时间：2026-11-05T20:41:52.185Z
中文译文更新时间：2026-11-11T11:09:25.378Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40danxbot/ui
原文对照：https://npmcn.com/package/%40danxbot/ui/?lang=original
项目主页：https://github.com/newms87/danxbot-ui#readme
源码仓库：https://github.com/newms87/danxbot-ui

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

- 包体积（解压后）：9.2 MB，1256 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：6 个
- peer 依赖：react ^19，react-dom ^19
- 首次发布：2026-08-26T00:53:05.810Z
- 最新版本发布：2026-11-05T20:41:51.828Z
- 近 30 天下载量：38988（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：473（近 12 个月 473 个）

## 中文简介

50 Arms——以一等原始为动作的域-不可知性反应设计系统.

## 安装

```sh
npm install @danxbot/ui
```

也可以使用：`pnpm add @danxbot/ui`、`yarn add @danxbot/ui`、`bun add @danxbot/ui`

## README

# @ danxbot/ ui (英语)

反应设计系统以运动为地基,而非完成通关.

```bash
npm install @danxbot/ui
```

```tsx
import { Button, Chat, ThemeMenu } from "@danxbot/ui";
```

```css
/* your app's Tailwind entry — see Setup, all three lines are required */
@import "tailwindcss";
@import "@danxbot/ui/theme.css";
@import "@danxbot/ui/styles.css";
```

需要反应 19和 Tailwind CSS 4 **在消费建筑中** - 包裹 故意没有编订的公用事业。 麻省理工学院有执照.

## 里面有什么东西

102个组件横跨形式,覆盖,结构,数据,布局和聊天.

**表单** - 外地、外地、输入、文本区、复选框、开关、无线电、无线电卡、, 选择、组合框、多组合框、滑动器、数字输入、OTP输入、文件上载、, 日期选择器、 切换器、 切换组、 工具栏

**重叠** – 对话框, 提醒Dialog, Popover, 工具提示, Toast, Menu, CommandPalette

**结构** - 纸牌,标签,Annion, Breadcrumb, Pagination, Appshell,, 等, 分隔器、 滚动区域、 可折叠、 面板组

**显示** - 阿凡达,进步,测量,进步,Stat,火花线,时光线, 树、 空状态、 徽章、 图标、 斯平纳、 斯平通、 装入覆盖

**数据** 数据表

**聊天** 聊天 信件 信件滚动器 作曲器 Markdown 代码Block, 工具呼叫、 附件、 模型选择器、 努力控制、 上下文计数器

## 值得我们了解的部分

### 运动是一层,不是装饰

四道春色曲线被烤成CSS `linear()` 放松点 弹簧曲线编码 其起坝比例- _形状_ - 没有别的了,所以时间是免费的 参数和一个曲线在任何速度上都是正确的。 没有 Java 脚本 动画运行时间;等效费用为35–40 KB来做这些免费的工作.

减少动议 **减少**常规 `animation-duration: 0.01ms !important` 扫描错误两次: spec要求删除、 减少 _或者说 已替换_,以及 `!important` 使决定不可逾越。 相反 `--motion-scale` 将期限减半 `--motion-travel` 无相距, 所以 组件在不知道存在的情况下继承偏好.

### 两个主题都来自一个合同

颜色是一个三级的 OKLCH 系统——原始的,语义上的符号,组件 符号——而两个主题都是针对同一种语义名称来写的. 阴暗 口音的手调大约为20%,因为一个大的饱和 在暗地上填充,读作"光"而不是"强调".

### 无障碍是您可以选择的下层

兼容性是一个切换器(`data-contrast="aa"`),不是永久状态. 各地强制AA 平分等级:去强调文本停止 取消强调。 默认为所绘制的调色板; AA 覆盖为 1 属性和荣誉 `prefers-contrast: more` 在第一负载.

### 大小是乘数,不是分点

`data-ui-scale` 设置无单位倍数 `rem`,与 读者自己的浏览器字体大小而不是压倒它. 它移动类型,间隔, 控制高度和图标大小, 硬地层, 这样一个水龙头目标永远不会 下降至24px以下.

### 聊天信息为打字部件

消息是部分列表——文本,代码,推理,工具调用,文件,或一个 命名应用程序组件——绝不是一连串的减值。 一个助手转身 平时互通出道词、一个工具呼叫和一个确认按钮,每个都 一个不同的渲染问题。 应用程序通过 名称,因此消息可以携带工作 UI :

```tsx
<Chat
  messages={messages}
  components={{
    approval: (props, ctx) => (
      <ApprovalCard {...props} onApprove={ctx.app.approve} />
    ),
  }}
  appContext={{ approve }}
/>
```

道具是简单的数据,组件是按名称处理的,所以留下记录 可串行性——电文中提及的内容将使得不可能 持续或重放.

### 图书馆命名自己的更丰富的选项

`COMPONENT_GUIDANCE` (从包根导出)是一个数据表,而不是一个 doc 页面: 对于每个基本原始- 以及每个本地- HTML/ ARIA 形状 库直接替换——它命名了通常适合的更丰富的组件 改善和原因`Textarea` → `InlineMarkdownEdit`编号 :`MarkdownEditor` 以传道者发誓, (单位:千美元) `<pre>` → `Markdown`,一个幽灵文本 `Button` → `IconButton`,等等). A 类 消费 repo 自己的源扫描读取此表而不是硬编码 同样的列表,所以在这里添加了一个新的更丰富的组件 延伸每个消费者的 执行时其侧面没有编辑。 拇指规则 它编码: 为 每块数据,使用最能匹配的元件,内含 编辑作为默认的交互——一个更简单的原始是 有时候还是正确的, 这就是消费者自己的逃生夹克 提出评论意见并不是使表格不完整的理由.

## 设置

两个样式表,你要两个。 在您的应用程序 Tailwind 条目中:

```css
@import "tailwindcss";
@import "@danxbot/ui/theme.css";   /* @source + the @theme bridge */
@import "@danxbot/ui/styles.css";  /* the token values, base layer and component CSS */
```

这是整个合同。 没有层序语句可以记住和 无配置路径 .

**你的"尾风"建筑 汇编了这个图书馆的公用设施 不是我们的.** `theme.css` 携带 `@source "./**/*.js"`,将您的编译器指向 已发运的模块;货包本身为零产生公用事业。 这是 它是一个真正的缺陷的修复: 编译的样式表向 `@layer utilities`,这是 _相同的图层名称_,以等价键 特异性,是最后导入的——所以库用来赢得每一个平局. 测量a 在1440px消耗应用, `grid grid-cols-1 xl:grid-cols-[1.6fr_1fr]` 已执行 一栏和 `md:grid-cols-2 xl:grid-cols-3` 做了两个。 什么都没有 滥用; `xl:` 是应该击败 `md:` 因为尾风 _类型_ 断点, 而这个保证只保存在一个编译器的输出内. 所以有一个 编译器.

`theme.css` 并携带 `@theme` 桥, 建构时从源取出 时间,将每个语义符号映射到Tailwind的命名空间上——没有它,你 拥有 `bg-accent-subtle` 无声地编译为一无所有. **秩序事项**数字 : `styles.css` 因为它能提供桥口的值.

**不用"尾风4"吗?** 那么,这个软件包将不作任何样式: 符号、基层和手写组件CSS,没有公用事业 都说吧 构件在结构上正确,视觉上没有样式——响亮,在 而不是像一个断点 悄悄地弄错了 尾风 4 消耗性建筑是一项要求,而不是一项建议.

字体是自动托管的woff2子集,而不是由 CDN 装入的,因为一个被屏蔽 CDN 使每个设计在系统字体中无任何出错. 他们是 被拉进来的 `styles.css`· ; `@danxbot/ui/fonts.css` 揭露 `@font-face` 如果你需要的话,他们自己决定.

首选项从 `<html>` 属性如此简单 CSS 和门户化内容 两人都看见:

```tsx
import { useTheme, useUiScale, useContrast, useMotionPreference } from "@danxbot/ui";
```

`ThemeMenu` 把四个都捆到一个口袋里.

## 浏览器支持

现代常绿浏览器——Chrome,Safari,Firefox和现代移动. 那个 选择才是 `@property`, (中文(简体) ), `@starting-style`集装箱查询, `field-sizing` 和 OKLCH 无倒数可用.

## 运行测试

维特套房运行在一个地方: Linux Docker 容器,由 `Dockerfile.test`。 。 。 . `npm test` 构建图像( 刻录到 `package-lock.json` 变换),将这个取出(git-visible)文件流入容器,运行到那里并取出容器. 这台机器上没有任何装置,没有 `node_modules` 共享.

```
npm test                                # the whole suite
npm test -- src/__tests__/board.test.tsx   # named files
npm run test:dist                       # the whole suite with the built dist/ copied in (what `verify` and `release` run)
npm run probe:slider                    # the slider browser probe against the built demo (needs `npm run build:demo`), same container
node scripts/test-in-container.mjs --script probe-scale audit-hover a11y-scan   # any browser probe, audit or screenshot script, in order, in one container
npm run probe                           # every browser probe (needs `npm run build:lib` and `npm run build:demo`)
npm run audit                           # every audit
npm run visual                          # the Playwright visual suite, in the Playwright container (`visual:update` re-records baselines)
```

A 类 `vitest` 运行到其它任何地方( Windows 检查出, 赤裸的 WSL shell) 在任何测试运行前拒绝运行, 并给此命令命名 。 每个浏览器的探测、审计和截图脚本也一样(`scripts/probe-*.mjs`, (中文(简体) ), `scripts/audit-*.mjs`, (中文(简体) ), `a11y-scan`, (中文(简体) ), `shoot*`和赤裸裸的 `playwright test` 在Playwright容器外拒绝。 无CI运行:没有工作流程.

## 许可证

麻省理工学院

## 常见问题

### @danxbot/ui 是什么？

50 Arms——以一等原始为动作的域-不可知性反应设计系统\.

### 如何安装 @danxbot/ui？

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

### @danxbot/ui 支持 TypeScript 吗？

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

### @danxbot/ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @danxbot/ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @danxbot/ui 可以商用吗？

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

### @danxbot/ui 的下载量有多少？

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

### @danxbot/ui 还在维护吗？

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