# @hone-ui/react 中文文档

规范地址：https://npmcn.com/package/%40hone-ui/react/

版本：0\.2\.0
npm 元数据更新时间：2026-11-01T05:07:09.699Z
中文译文更新时间：2026-11-01T09:02:04.318Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40hone-ui/react
原文对照：https://npmcn.com/package/%40hone-ui/react/?lang=original
源码仓库：https://github.com/Visalan-H/ui-library

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

- 包体积（解压后）：1.1 MB，486 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，react-aria-components ^1\.21\.0
- 首次发布：2026-10-22T15:56:37.830Z
- 最新版本发布：2026-11-01T05:07:09.514Z
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

React组件与熟悉的API，建立在React Aria和纯CSS。

## 安装

```sh
npm install @hone-ui/react
```

也可以使用：`pnpm add @hone-ui/react`、`yarn add @hone-ui/react`、`bun add @hone-ui/react`

## README

# @hone-ui /反应

使用熟悉的道具和主题API来React组件。React Aria组件处理行为和 可访问性和样式作为普通CSS发布，从CSS变量中读取主题值。

预发布。完整的文档，每个组件的示例和道具： [https://hone-ui-docs.vercel.app](https://hone-ui-docs.vercel.app/)

## 安装

```bash
npm install @hone-ui/react react-aria-components
npm install -D @hone-ui/sx
```

React 19和 `react-aria-components` 需要1.21或更高版本。

## 设置

添加 `@hone-ui/sx` 插件所以 `sx` 编译成CSS。在Vite中，把它列在前面 `react()`：

```ts
// vite.config.ts
import react from '@vitejs/plugin-react';
import sx from '@hone-ui/sx/vite';
import { defineConfig } from 'vite';

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

在Next.js中，包装现有的配置并打开 `optimizePackageImports`：

```ts
// next.config.ts
import { withSx } from '@hone-ui/sx/next';

export default withSx({
  experimental: { optimizePackageImports: ['@hone-ui/react'] },
});
```

在你自己的全局CSS之后，导入一个应用的根目录。非分层CSS胜过库，所以 删除模板的 `index.css`， `App.css` 和 `globals.css` 重置，或者把它们放在更早的 `@layer`.

```ts
import './globals.css'; // your own CSS, if you keep any
import '@hone-ui/react/styles/material.css'; // or minimal.css
```

将应用程序封装 `ThemeProvider`，并加上 `CssBaseline` 设置页面背景和字体。在Next.js, 将提供程序放在标记为 `'use client'`.

```tsx
import { CssBaseline, createTheme, ThemeProvider } from '@hone-ui/react';

const theme = createTheme();

export function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* your app */}
    </ThemeProvider>
  );
}
```

## 组件

手风琴，警报，AppBar，自动完成，头像，背景，徽章，框，按钮，卡片，复选框， 芯片，循环进度，CssBaseline，对话框，分隔，抽屉，FormControl, FormControlLabel， FormGroup, FormHelperText, FormLabel, IconButton， input装饰品，InputLabel, LinearProgress, List, Menu， 菜单项，菜单列表，分页，纸张，无线电，无线电组，选择，骨架，滑块，零食栏， 堆栈，开关，表，选项卡，文本字段，工具栏，工具提示和排版，加上他们的部分，如 `DialogTitle` 和 `TableRow`.

该包为下面的每个组件提供AI指南 `@hone-ui/react/ai/`编码助理 ,读 `node_modules` 找到他们。开始 `ai/index.md`，其中一行列出了每个指南。

## 常见问题

### @hone-ui/react 是什么？

React组件与熟悉的API，建立在React Aria和纯CSS。

### 如何安装 @hone-ui/react？

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

### @hone-ui/react 支持 TypeScript 吗？

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

### @hone-ui/react 支持 ESM 还是 CommonJS？

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

### @hone-ui/react 可以商用吗？

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

### @hone-ui/react 还在维护吗？

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