# @fairmint/ui 中文文档

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

版本：0\.4\.32
npm 元数据更新时间：2026-11-14T01:19:33.191Z
中文译文更新时间：2026-11-14T09:04:27.252Z
软件包许可：SEE LICENSE IN LICENSE

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

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

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

- 包体积（解压后）：23.8 MB，4302 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：24\.x
- 运行依赖：11 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2026-03-03T17:08:33.660Z
- 最新版本发布：2026-11-14T01:19:32.824Z
- 近 30 天下载量：20635（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：128（近 12 个月 128 个）

## 中文简介

Fairmint 设计系统和 UI 组件库

## 安装

```sh
npm install @fairmint/ui
```

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

## README

# @ fairmint/ ui (英语)

费尔明特共享设计系统和UI组件库.

## 文档

-   [@fairmint/ ui 共享组件](https://github.com/Fairmint/dev-docs/blob/main/docs/development/ui.md)

## 设计质量

读取 [文件/设计质量](https://npmcn.com/package/%40fairmint/ui/docs/design-quality.md) 在创建或审查产品UI之前。 它记录了经批准的入职v5质量栏,共享间隔和等级规则,可重复使用的组件预期,以及创始人,投资人,入职,SAFE,赠款,和可封顶的工作的可视审查门.

## 快速启动

### 1\. 安装

```bash
bun add @fairmint/ui
```

曼汀作为一个依赖性被包括在内——没有额外的软件包可以安装.

### 2\. 导入样式(需要)

```typescript
// In your app's entry file (main.tsx, App.tsx, etc.)
import '@fairmint/ui/styles.css';
```

**这是必要的.** 这一单项导入包括曼汀核心CSS,通知样式,和费尔明特组件动画. 没有它,组件就变无型。 您不需要安装或导入 `@mantine/core/styles.css` 单独——都包括在内.

### 3\. 与提供者的包装

```tsx
import { FairmintProvider } from '@fairmint/ui';

function App() {
  return (
    <FairmintProvider>
      {/* Your app */}
    </FairmintProvider>
  );
}
```

### 4\. 使用组件

```tsx
import { PageHeader, FairmintLogo, LoadingSpinner } from '@fairmint/ui';
```

## 地方发展(实况编辑)

当在用户端库和消费者端应用一起工作时, 在不构建的情况下添加即时HMR的Vite插件:

```typescript
// your-app/vite.config.ts
import { fairmintUiLocal } from '@fairmint/ui/vite';

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

默认这没有任何作用——它使用 npm 发布的包. 要启用本地源解析 :

```bash
LOCAL_UI=1 bun run dev
```

插件检查 `../ui/src/index.ts` 相对于你的应用。 如果找到,进口将用即时高温脉冲解决当地来源。 如果找不到, 它会发出警告, 回到 npm .

## 字体

添加到您的 `index.html`数字 :

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700&display=swap" rel="stylesheet" />
```

## 出口

| 导入 | 目录 |
| --- | --- |
| `@fairmint/ui` | Fairmint 提供器,主题,组件,颜色常数 |
| `@fairmint/ui/styles.css` | 曼汀核心 CSS + 库组件 CSS |
| `@fairmint/ui/mui-icons` | MUI-compat 图标再导出(可抖树子路径) |
| `@fairmint/ui/vite` | `fairmintUiLocal()` 本地 dev 的 Vite 插件 |

## 发展

```bash
cd design/ui
bun run dev          # Storybook on port 6006
bun run build        # Build library
bun run test         # Run tests
bun run lint         # Lint (Biome)
```

## 出版

自动推入 `main` 何时 `ui/` 文件更改 。 如果当前版本已经发布, 则会自动添加补丁版本 .

## 常见问题

### @fairmint/ui 是什么？

Fairmint 设计系统和 UI 组件库

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

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

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

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

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

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

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

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

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

@fairmint/ui 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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