# harmo-ui 中文文档

规范地址：https://npmcn.com/package/harmo-ui/

版本：0\.1\.1
npm 元数据更新时间：2026-11-03T16:14:04.429Z
中文译文更新时间：2026-11-03T19:54:58.619Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：588 kB，33 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=20
- 运行依赖：0 个
- 首次发布：2026-11-03T16:13:07.608Z
- 最新版本发布：2026-11-03T16:14:03.783Z
- 已发布版本数：2（近 12 个月 2 个）

## 中文简介

将Harmo的组件和样式复制到您的项目中，并使它们成为您的。

## 安装

```sh
npm install harmo-ui
```

也可以使用：`pnpm add harmo-ui`、`yarn add harmo-ui`、`bun add harmo-ui`

## README

# harmo-ui

复制的组件 [Harmo](https://github.com/windrunner21/harmo)css优先 用于仪表板和应用程序的UI库，以及它们的样式， 把它们变成你的。

## 使用

从项目的根目录：

```sh
npx harmo-ui add tabs
```

复制制表符，它的样式，和任何它需要的：

```text
src/components/harmo/
  harmo.css
  tokens.css
  tabs/Tabs.tsx
  tabs/TabNav.tsx
  tabs/useTabsMotion.ts
  tabs/tabs.css
  provider/HarmoProvider.tsx
  lib/children.ts
  lib/withClass.ts
```

进口 `harmo.css` 一次，在根布局或入口文件中。它列出令牌和 每个组件的样式，以及 `npx harmo-ui add` 使它保持最新。然后使用 组件:

```tsx
import "@/components/harmo/harmo.css";
import { Tabs, TabList, Tab, TabPanel } from "@/components/harmo/tabs/Tabs";
```

`@/` 是Next.js项目默认设置的路径别名。没有亲戚，就用亲戚 路径。

你可以修改这些文件，只剩下React可以依赖。他们需要反应 19.3或更高版本和TypeScript。

## 命令

| 命令 | 效果 |
| --- | --- |
| `npx harmo-ui add <component...>` | 复制组件及其样式和所需的内容 |
| `npx harmo-ui add --all` | 复制每个组件 |
| `npx harmo-ui list` | 列出组件 |

| 选择 `add` | 效果 |
| --- | --- |
| `-p`， `--path <folder>` | 在哪里复制它们。默认情况下 `components/harmo`,或 `src/components/harmo` 如果项目有 `src` 文件夹中。每次使用另一个文件夹时传递它 |
| `-o`， `--overwrite` | 替换与Harmo不同的文件，无需询问 |
| `--dry-run` | 表明什么会改变，但什么也改变不了 |

## 更新

复制的文件不会自己更新，所以它们也不会得到Harmo的修复。 要获取更新的版本，请运行 `npx harmo-ui@latest add <component>`． 它永远不会取代 你没有询问就更改的文件，以及它不能询问的文件保持原样。

要通过包管理器进行更新，请安装以下包：

```sh
bun add @harmo-ui/css @harmo-ui/react
```

为项目选择一种方式：复制的组件和安装的组件都有自己的 自己的 `HarmoProvider`，因此使用两者的项目需要将其应用程序封装在两者中。

## 了解更多

-   [组件](https://github.com/windrunner21/harmo/blob/master/docs/components/README.md)： 每个组件的props，在React部分下
-   [主题](https://github.com/windrunner21/harmo#theming)：更改复制的内容 `tokens.css`，或覆盖其自定义属性

哈莫在 `0.x`，所以它的api在不同的版本之间可能会发生变化。

## 许可证

[麻省理工学院](https://npmcn.com/package/harmo-ui/LICENSE)

## 常见问题

### harmo-ui 是什么？

将Harmo的组件和样式复制到您的项目中，并使它们成为您的。

### 如何安装 harmo-ui？

在项目目录运行 npm install harmo-ui，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 harmo-ui，可以用 npx harmo-ui 直接运行。

### harmo-ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/harmo-ui 是否存在。

### harmo-ui 支持 ESM 还是 CommonJS？

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

### harmo-ui 需要什么版本的 Node\.js？

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

### harmo-ui 可以商用吗？

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

### harmo-ui 还在维护吗？

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