# @coderabbitai/carrot-ui 中文文档

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

版本：0\.31\.0
npm 元数据更新时间：2026-09-11T23:18:57.055Z
中文译文更新时间：2026-11-10T07:35:36.246Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：464 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：16 个
- peer 依赖：react ^18\.3\.1 \|\| ^19\.0\.0，react-dom ^18\.3\.1 \|\| ^19\.0\.0
- 首次发布：2026-05-13T01:51:38.518Z
- 最新版本发布：2026-08-10T18:14:08.703Z
- 近 30 天下载量：5649（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 35 个）

## 中文简介

CodeRabbit设计系统. 由 Base UI 所建的回放组件,以 Tailwind CSS v4 为样式.

## 安装

```sh
npm install @coderabbitai/carrot-ui
```

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

## README

# 胡萝卜UI

用于 CodeRabbit 的响应组件库 。 建造在 [基础UI](https://base-ui.com/)样式 [尾风 CSS v4](https://tailwindcss.com/),以OKLCH颜色系统为主.

## 安装

### 1\. 安装

```bash
pnpm add @coderabbitai/carrot-ui
```

同伴依赖性 :

```bash
pnpm add react react-dom tailwindcss @tailwindcss/vite
```

### 2\. 配置CSS

在您的 CSS 切入点( 例如 ). `index.css`:

```css
@import "tailwindcss";
@import "@coderabbitai/carrot-ui/css";
```

这导入了主题符号,颜色尺度,暗模式变体,并让Tailwind扫描库,以获取工具类.

### 3\. 设立Vite

添加 Tailwind CSS Vite 插件 :

```ts
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
    plugins: [tailwindcss(), react()],
})
```

### 4\. 暗模式

胡萝卜 UI 使用 `data-theme="dark"` 用于暗模式。 它必须设置在 `<html>` 元素, CSS 变量在 `:root`数字 :

```html
<html data-theme="dark">
    ...
</html>
```

在反应中,设置它 `document.documentElement`数字 :

```ts
document.documentElement.setAttribute("data-theme", "dark")
```

## 使用量

```tsx
import { Button, Badge, Avatar } from "@coderabbitai/carrot-ui"

function App() {
    return (
        <div className="bg-cui-base-1 text-cui-primary min-h-screen p-8">
            <Button>Click me</Button>
            <Badge variant="accent">New</Badge>
            <Avatar seed="user@example.com" />
        </div>
    )
}
```

提供商品牌图标也可从包根获得:

```tsx
import { SlackIcon } from "@coderabbitai/carrot-ui"

function SlackLink() {
    return <SlackIcon className="size-4" title="Slack" />
}
```

## 文档

运行 `pnpm dev` 访问 `/reference` 整个游乐场。 基金会:

-   **颜色** (单位:千美元)`/reference/foundations/colors`)——OKLCH天平和语义符号
-   **间距** (单位:千美元)`/reference/foundations/spacing`)——间隔尺度
-   **原则** (单位:千美元)`/reference/foundations/principles`——跨领域设计和API公约每个组成部分如下. 资料来源: [`principles.mdx`](https://npmcn.com/package/%40coderabbitai/carrot-ui/src/reference/pages/foundations/principles.mdx) ——可直接在GitHub上读取.

如果你正在编写一个新的组件,从 **原则** ——它是视觉和API公约的真理来源.

## 发展

```bash
pnpm install
pnpm dev          # playground dev server
pnpm build        # library build (dist/)
pnpm typecheck    # type checking
pnpm lint         # linting
```

## 出版

请从更改中打开发布 PR `main`。使用常规承诺前缀,例如 `fix:` 财务报告和审定财务报表 `feat:` 因此发布请选择下一个版本. 合并发行版请 PR 以缓冲 `package.json`,更新 `CHANGELOG.md`,创建 `v*` 标签,并公布软件包.

出版工作流程检查 `v*` 标记匹配 `package.json`,发布到 GitHub 包和 公共 npm 注册,然后上传到 GitHub 发行. 手动 `v*` 标签仍然有效, 但标签版本必须匹配 `package.json`。 。 。 .

需要的 GitHub 动作秘密 :

-   `CODERABBIT_NPM_TOKEN`: npm 为公共 npm 注册发布令牌.
-   `GITHUB_TOKEN`:内置的 GitHub Actions 令牌用于 GitHub 套件, 释放 PR, 标记, 并释放出资产.
-   `RELEASE_PLEASE_TOKEN`: 可选的 GitHub 令牌, 请发行 。 如果发布时使用此功能 请 PRs 需要正常的 CI 检查才能运行 .

在设置下配置 GitHub 中的寄存器机密 .

## 常见问题

### @coderabbitai/carrot-ui 是什么？

CodeRabbit设计系统\. 由 Base UI 所建的回放组件,以 Tailwind CSS v4 为样式\.

### 如何安装 @coderabbitai/carrot-ui？

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

### @coderabbitai/carrot-ui 支持 TypeScript 吗？

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

### @coderabbitai/carrot-ui 支持 ESM 还是 CommonJS？

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

### @coderabbitai/carrot-ui 可以商用吗？

@coderabbitai/carrot-ui 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @coderabbitai/carrot-ui 的下载量有多少？

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

### @coderabbitai/carrot-ui 还在维护吗？

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