# @databricks/design-system 中文文档

规范地址：https://npmcn.com/package/%40databricks/design-system/

版本：2\.0\.16
npm 元数据更新时间：2026-11-03T02:59:04.752Z
中文译文更新时间：2026-11-11T13:12:20.705Z
软件包许可：ISC

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

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

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

- 包体积（解压后）：18.2 MB，2061 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：42 个
- peer 依赖：react \*，moment ^2\.25\.3，react-dom \*，@jest/globals ^30\.0\.2，@emotion/react ^11\.11\.3
- 首次发布：2021-11-11T17:14:59.323Z
- 最新版本发布：2026-11-03T02:59:04.591Z
- 近 30 天下载量：7434（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：70（近 12 个月 17 个）

## 中文简介

dbui 设计系统

## 安装

```sh
npm install @databricks/design-system
```

也可以使用：`pnpm add @databricks/design-system`、`yarn add @databricks/design-system`、`bun add @databricks/design-system`

## README

# dbui 设计系统

Databricks 组件库.

## 用 dbui 启动项目

运行 `npx @databricks/design-system` 创建 Vite 或 Next.js 工程,或添加设计 系统到已有的 React 工程。 工具安装软件包和所需的对等器,配置 情感与全球风格,并增加编码代理指导.

新的项目包括一个浮取主题器,用于原始 Du Bois 主题(默认), dbui Base, 天才一号 和阴影中性近似 所有字体和浅/暗设置都包括在内; 在浏览器中坚持主题和外观选择。 对于已脚本运行,设置初始主题为 `--theme dubois`, (中文(简体) ), `--theme base`, (中文(简体) ), `--theme genie-one`,或 `--theme shadcn`。 。 。 .

## 共享模拟( Databricks 员工)

从上面创建的 Vite 项目中运行 `npx @databricks/design-system share` 上传到 [SP2K 设计](https://sp2k-design-t0a-58b6-6051921418418893.staging.aws.databricksapps.com/studio/)数据砖 内部模拟画廊

```sh
npx @databricks/design-system share --project "Onboarding redesign" --artifact "Intent modal" --note "First pass"
```

重播同样的 `--project` 财务报告和审定财务报表 `--artifact` 增加一个版本; `--invite email[:role]` 授权审查员访问. 它需要Databricks CLI签到E2狗粮 (单位:千美元)`databricks auth login --host https://e2-dogfood.staging.cloud.databricks.com --profile e2-dogfood`) (中文(简体) ). 运行它 `--help` 每一个选项.

## 复制页面模板

套件包括由shadcn/ui块画廊所启发的可编辑dbui页面模板. 由 dbui 设置的 React 项目运行 :

```sh
npx @databricks/design-system page-templates
npx @databricks/design-system add LandingPage
```

`add` 将捆绑的源复制到 `src/page-templates/` 不替换已有文件. 每个模板也安装 `PageTemplateMain.tsx`, (中文(简体) ), `workspace-shell.tsx`,以及 `workspace-shell-top-bar.tsx`。未更改的共享帮助器会在后续安装上被再利用. 软件包包括12个页面布局; 运行 `page-templates` 以列出他们的PascalCase名称. 将复制的模板连接到您的应用程序中,并通过其槽提供内容 。 见 `docs/agents-npm/common/page-templates.md` 用于目录和使用指南.

## 地物标志

一些 dbui 组件在基于特性旗的执行间切换, 例如 `databricks.fe.designsystem.useNativeButton`。默认情况下,每个旗帜都使用此软件包的值 已经出版。 您可以调用 `setDesignSystemFlags` 在你的应用之前 首先使:

```tsx
import { setDesignSystemFlags } from '@databricks/design-system/flags';

setDesignSystemFlags({
  'databricks.fe.designsystem.useNativeButton': false,
});

createRoot(document.getElementById('root')!).render(<App />);
```

每通电话都会取代先前电话的覆接. dbui 忽略其类型 与旗帜不符,例如布尔旗的编号.

注意组件读取旗子时会渲染出并不会在旗子改变时重新发回,所以 在第一次渲染前设置旗帜.

## 使用 dbui 编码代理

这个包裹船 `AGENTS.md`,链接到关于设置、组件选择、主题、, 以及要避免的陷阱。 包含 `@node_modules/@databricks/design-system/AGENTS.md` 在您的项目代理中 说明. 代理指南还链接到可复制的页面模板.

## 常见问题

### @databricks/design-system 是什么？

dbui 设计系统

### 如何安装 @databricks/design-system？

在项目目录运行 npm install @databricks/design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、moment（^2\.25\.3）、react-dom（\*）、@jest/globals（^30\.0\.2）、@emotion/react（^11\.11\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 dbui-mcp、design-system，可以用 npx dbui-mcp 直接运行。

### @databricks/design-system 支持 TypeScript 吗？

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

### @databricks/design-system 支持 ESM 还是 CommonJS？

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

### @databricks/design-system 可以商用吗？

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

### @databricks/design-system 的下载量有多少？

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

### @databricks/design-system 还在维护吗？

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