# @bardioc/ui 中文文档

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

版本：0\.7\.39
npm 元数据更新时间：2026-11-04T11:37:25.276Z
中文译文更新时间：2026-11-07T17:52:28.692Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bardioc/ui
原文对照：https://npmcn.com/package/%40bardioc/ui/?lang=original

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

- 包体积（解压后）：2.2 MB，940 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19\.0
- 运行依赖：27 个
- peer 依赖：react ^19\.2，react-dom ^19\.2，next-themes ^0\.4\.6，react-hook-form ^7\.64\.0，@bardioc/i18n-core ^0\.1\.2
- 首次发布：2026-07-21T18:12:26.472Z
- 最新版本发布：2026-11-04T11:37:25.085Z
- 近 30 天下载量：3463（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：60（近 12 个月 60 个）

## 中文简介

Bardioc UI组件库:Bardioc组件和用于BardiocOS应用的Shadcn原始相

## 安装

```sh
npm install @bardioc/ui
```

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

## README

# @bardioc/ ui (英语)

Bardioc UI组件库用于BardiocOS应用. 将自定义的Bardioc组件层与Tailwind CSS 4.上方的Shadcn/Radix原始相融合.

## 安装

```bash
pnpm add @bardioc/ui
# peers (provide in the consumer app)
pnpm add react react-dom @bardioc/i18n-core
```

## 入境点

`@bardioc/ui` 船只出口次路径。 导入您需要的表面而不是软件包根 .

| 子路径 | 目的 |
| --- | --- |
| `@bardioc/ui/components` | 气管组件(无图表表) |
| `@bardioc/ui/components/charts` | Bardioc 图表组件( 背书) |
| `@bardioc/ui/components/metrics` | 中度分数 |
| `@bardioc/ui/shadcn` | Shadcn/Radix原始(非图)——作为命名空间导入 |
| `@bardioc/ui/shadcn/chart` | Shadcn图表原始( 已备份) |
| `@bardioc/ui/hooks` | 重用重用钩子 |
| `@bardioc/ui/lib` | 功用函数( U)`cn`,颜色帮助者,发相,.) |
| `@bardioc/ui/types` | 共享类型脚本 |
| `@bardioc/ui/consts` | 共享常数 |
| `@bardioc/ui/icons` | SVG 图标组件 |
| `@bardioc/ui/styles/*` | CSS 入境点`globals.css`,组件样式表) |
| `@bardioc/ui/postcss.config` | PostCSS 为消费者预设 |

### 使用准则

组件选择、设计符号、执行模式和UI复制规则船,包装在 [`docs/`](https://npmcn.com/package/%40bardioc/ui/docs/INDEX.md) (单位:千美元)`node_modules/@bardioc/ui/docs/INDEX.md` (已安装).

### Shadcn原始人只读

下方的文件 `src/components/shadcn/` 由 `shadcn` CLI(英语:CLI). 不要手剪他们。 要更改视觉或行为, 请创建或编辑 Bardioc 组件 `src/components/bardioc/<category>/` 即超越或构成原始.

## 构建

`tsc` 将每个源文件汇编到一个带有其声明的无害环境管理文件,以及 `tsc-alias` 重写 `#`\- 对亲属的异名 `.js` 路径。 每个模块有一个文件让消费者的捆绑者放下它不导入的每个文件,并保留每个模块的一个副本跨子路径.

### 反应服务器组件

只有阴影源文件携带 `'use client'` 指令; 桶和大多数巴迪奥克组件没有。 消耗时 `@bardioc/ui/{components,shadcn,hooks}` 从 React 服务器组件环境(例如 Next.js App Router)中,将消耗文件标记为 `'use client'` 自己说:

```tsx
'use client';
import { Command } from '@bardioc/ui/shadcn';
```

非RSC环境(Vite, Plain Webpack, Storybook, Vitest)不需要特殊处理.

## 使用量

```tsx
import { Button, DataTable } from '@bardioc/ui/components';
import { RevenueChart } from '@bardioc/ui/components/metrics';
import * as Shadcn from '@bardioc/ui/shadcn';
import { ChartContainer } from '@bardioc/ui/shadcn/chart';
import { cn } from '@bardioc/ui/lib';
import '@bardioc/ui/styles/bardioc-ui.css'; // pre-compiled theme + utilities
```

### 样式

本套件中的组件样式本身为 Tailwind 工具类(`className="bg-primary text-primary-foreground rounded-md ..."`) (中文(简体) ). 尾风课并不是真正的CSS——它们是由尾风在建设时翻译为CSS规则的标志. 没有这种翻译,标记具有类属性,对浏览器没有意义,组件变形为无样式.

为使组件正确转换, **在您的应用程序的条目文件中导入预编译的 CSS 捆绑**数字 :

```tsx
// src/main.tsx (or app/layout.tsx, etc. — once per app)
import '@bardioc/ui/styles/bardioc-ui.css';
```

该捆绑(~200 KB 已修改)包含:

-   完整的 Tailwind v4 运行时基层
-   Bardioc和Shadcn组件实际使用的每一类公用事业(我们大楼的树木被震动——未使用的公用事业除外)
-   边框主题变量和颜色调色板
-   阴影主题层( CSS 自定义属性用于 `--background`, (中文(简体) ), `--primary`, (中文(简体) ), `--ring`等,以光和暗两种模式)
-   `tw-animate-css` 动画公用事业
-   每个组件定制 CSS 与我们的组件并存

消费者 **不需要安装尾风** 用来使用图书馆。 它们不需要配置 `@source` 或一个 `content` 阵列。 单CSS导入提供了我们所有组件的参考.

#### CSS的两个切入点——用于

| 条目 | 何时使用 |
| --- | --- |
| `@bardioc/ui/styles/bardioc-ui.css` | **外部消费者** (npm安装). 事前编译,自成一体. 默认. |
| `@bardioc/ui/styles/globals.css` | **只有独行侠兄弟**。源样式;您自己运行 Tailwind 并添加 `@source`。 。 。 . |

`globals.css` 包含 `@import 'tailwindcss'` 加号 `@source '../../../../packages/**/...'` 仅在此单列范围内解决的指令。 它的存在使得兄弟姐妹们可以用自己的应用特定类名来扩展Tailwind,同时仍然分享我们的主题符号. **在安装的节点模块中,这些 `@source` 路径指向无稽之谈,文件无效.** 使用 `bardioc-ui.css` 换句话说.

#### CSS的制作方式

软件包构建分三步运行:

1.  `tsc` 财务报告和审定财务报表 `tsc-alias` 编译每个源文件到 `dist/` (无CSS处理).
2.  `node scripts/copy-assets.mjs` 复制原始源 CSS 文件(`globals.css`, (中文(简体) ), `shadcn.css`, (中文(简体) ), `components/*.css`改为 `dist/styles/` 给独身伴侣的消费者.
3.  `tailwindcss -i src/styles/build-bundle.css -o dist/styles/bardioc-ui.css --minify` 运行 Tailwind v4 CLI: 它扫描 `packages/ui/src/**/*.{ts,tsx}` 对于我们JSX中引用的类名,只生成匹配的功能 CSS, 预置主题层, 并写入单个已修改的捆绑 .

Tailwind编译步骤让外部消费者完全跳过工具链. 所建造的文物是可移植的,框架不可知的CSS——同样的文件在Next.js,Vite,plain HTML,或任何支持CSS导入的捆绑器中都有作用.

#### 主题覆盖

`bardioc-ui.css` 将符号定义为CSS自定义属性(例如. `--primary`, (中文(简体) ), `--background`) (中文(简体) ). 在消费者CSS中覆盖它们 _之后_ 导入捆绑 :

```css
@import '@bardioc/ui/styles/bardioc-ui.css';

:root {
  --primary: oklch(0.6 0.2 250);
  --radius: 0.5rem;
}
```

对于更深层的主题(添加新的效用颜色、自定义断点等),使用源类型 `globals.css` 路径从一对一的双胞胎并直接延伸出 Tailwind.

## 发展

```bash
pnpm --filter @bardioc/ui build         # tsc + copy CSS + tailwind compile
pnpm --filter @bardioc/ui check-types
pnpm --filter @bardioc/ui test
pnpm --filter @bardioc/ui pack:check    # inspect what would be published
```

软件包以声明文件发布HEM JavaScript. 测试在 `packages/ui/tests/unit/` 并被排除在 `dist`。 。 。 .

## 常见问题

### @bardioc/ui 是什么？

Bardioc UI组件库:Bardioc组件和用于BardiocOS应用的Shadcn原始相

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

在项目目录运行 npm install @bardioc/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2）、react-dom（^19\.2）、next-themes（^0\.4\.6）、react-hook-form（^7\.64\.0）、@bardioc/i18n-core（^0\.1\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

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

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

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

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

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

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

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

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

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

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