@hone-ui /反应

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

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

安装

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()：

// 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：

// 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.

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'.

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，其中一行列出了每个指南。