# @diditui/core 中文文档

规范地址：https://npmcn.com/package/%40diditui/core/

版本：0\.0\.22
npm 元数据更新时间：2026-10-26T20:23:30.478Z
中文译文更新时间：2026-11-12T07:35:48.412Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：213 kB，149 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：23 个
- peer 依赖：react \>=18，qrcode ^1\.5\.4，sonner \>=2，input-otp ^1\.5\.0，react-dom \>=18，react-hook-form \>=7，react-day-picker ^10\.0\.2，@diditui/icons-react ^0\.0\.20
- 首次发布：2025-07-09T14:56:19.952Z
- 最新版本发布：2026-10-26T20:23:29.640Z
- 近 30 天下载量：11462（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 6 个）

## 中文简介

可访问且自定义的组件, 您可以复制并粘贴到您的应用程序中 。 免费,开源. **使用此程序来构建您的组件库**。 。 。 .

## 安装

```sh
npm install @diditui/core
```

也可以使用：`pnpm add @diditui/core`、`yarn add @diditui/core`、`bun add @diditui/core`

## README

# Didit/ ui (英语)

可访问且自定义的组件, 您可以复制并粘贴到您的应用程序中 。 免费,开源. **使用此程序来构建您的组件库**。 。 。 .

![cover](https://github.com/user-attachments/assets/2ded346b-2427-4b04-82d9-d40de8a6c9b4)

## 安装

### 添加尾风 CSS 4

组件的样式使用Tailwind CSS. 您需要在您的项目中安装 Tailwind CSS .

[遵循 Tailwind CSS 安装指令启动 .](https://tailwindcss.com/docs/installation)

### 添加依赖关系

在您的工程中添加以下依赖性 :

```bash
pnpm add  @diditui/icons-react @diditui/core tw-animate-css
```

### 添加 `Inter` 字体

#### 下一个 js

使用 [下个/下个](https://nextjs.org/docs/app/getting-started/fonts) 在下一个 js 应用程序中添加字体的模块

```tsx
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}
```

#### 谷歌字体 `css @import`

```css
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import "tailwindcss";
@import "tw-animate-css";
@import "@diditui/core/theme.css";
...
```

### 配置样式

在您的样式/ global.css 文件中添加以下内容 .

```css
@import "tailwindcss";
@import "tw-animate-css";
@import "@diditui/core/theme.css";

@custom-variant dark (&:is(.dark *));

@layer base {
  body {
    @apply font-inter bg-neutral-white text-neutral-black;
  }
}

@layer components {
  .gradient-gray-100-900 {
    background: var(--gradient-gray-100-900);
  }

  .gradient-gray-100-300 {
    background: var(--gradient-gray-100-300);
  }

  .gradient-gray-600-500 {
    background: var(--gradient-gray-600-500);
  }

  .gradient-gray-700-500 {
    background: var(--gradient-gray-700-500);
  }

  .gradient-gray-900-800 {
    background: var(--gradient-gray-900-800);
  }

  .gradient-brand-custom {
    background: var(--gradient-brand-custom);
  }
  .gradient-brand-custom-2 {
    background: var(--gradient-brand-custom-2);
  }

  .gradient-brand-100-300 {
    background: var(--gradient-brand-100-300);
  }

  .gradient-brand-600-500 {
    background: var(--gradient-brand-600-500);
  }

  .gradient-brand-700-500 {
    background: var(--gradient-brand-700-500);
  }

  .gradient-brand-900-800 {
    background: var(--gradient-brand-900-800);
  }
}
```

### 就这样

您现在可以开始为您的项目添加组件 .

```tsx
import { Button } from "diditui/core";

export default function Page() {
  return (
    <div>
      <Button variant="primary" size="md"> Create App </Buttom>
    </div>
  );
}
```

## 常见问题

### @diditui/core 是什么？

可访问且自定义的组件, 您可以复制并粘贴到您的应用程序中 。 免费,开源\. 使用此程序来构建您的组件库。 。 。 \.

### 如何安装 @diditui/core？

在项目目录运行 npm install @diditui/core，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、qrcode（^1\.5\.4）、sonner（\>=2）、input-otp（^1\.5\.0）、react-dom（\>=18）、react-hook-form（\>=7）、react-day-picker（^10\.0\.2）、@diditui/icons-react（^0\.0\.20）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @diditui/core 支持 TypeScript 吗？

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

### @diditui/core 支持 ESM 还是 CommonJS？

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

### @diditui/core 可以商用吗？

@diditui/core 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @diditui/core 的下载量有多少？

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

### @diditui/core 还在维护吗？

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