框架集成
将 HeroUI 集成到你的框架中
Next.js
1. 创建 Next.js 项目
npx heroui-cli@latest init当出现提示时，选择 App 或 Pages 模板。然后进入新创建的文件夹并安装依赖（例如 pnpm install）。
2. 使用你的第一个 HeroUI 组件
示例：app/page.tsx
import {Button} from "@heroui/react";
export default function HomePage() {
return (
<main className="flex min-h-screen items-center justify-center">
<Button variant="tertiary">Hello HeroUI</Button>
</main>
);
}示例：pages/index.tsx
import {Button} from "@heroui/react";
export default function HomePage() {
return (
<main className="flex min-h-screen items-center justify-center">
<Button variant="tertiary">Hello HeroUI</Button>
</main>
);
}HeroUI v3 无需 Provider。安装并导入样式后，组件即可直接使用。
3. 区域设置（可选）
为了与 Next.js 集成，请确保服务端的区域设置与客户端一致。
在根布局中，确定用户的首选语言，并在 <html> 元素上设置 lang 和 dir 属性。
// app/layout.tsx
import {headers} from 'next/headers';
import {isRTL} from '@heroui/react';
import {ClientProviders} from './provider';
export default async function RootLayout({children}) {
// Get the user's preferred language from the Accept-Language header.
// You could also get this from a database, URL param, etc.
const acceptLanguage = (await headers()).get('accept-language');
const lang = acceptLanguage?.split(/[,;]/)[0] || 'en-US';
return (
<html lang={lang} dir={isRTL(lang) ? 'rtl' : 'ltr'}>
<body>
<ClientProviders lang={lang}>
{children}
</ClientProviders>
</body>
</html>
);
}创建 app/provider.tsx，其中应渲染一个 I18nProvider，用于设置 React Aria 所使用的区域设置。
// app/provider.tsx
"use client";
import {I18nProvider} from '@heroui/react';
export function ClientProviders({lang, children}) {
return (
<I18nProvider locale={lang}>
{children}
</I18nProvider>
);
}如果你使用了带 nonce 的 内容安全策略（CSP），请在文档的 head 中添加 <meta property="csp-nonce"> 标签，并将其 content 属性设置为生成的 nonce 值。React Aria 会自动从该标签读取 nonce。
Vite
1. 创建 Vite 项目
npx heroui-cli@latest init当出现提示时，选择 Vite 模板。然后进入新创建的文件夹并安装依赖（例如 pnpm install）。
2. 使用你的第一个 HeroUI 组件
示例：src/App.tsx
import {Button} from "@heroui/react";
function App() {
return (
<main className="flex min-h-screen items-center justify-center">
<Button variant="tertiary">Hello HeroUI</Button>
</main>
);
}
export default App;HeroUI v3 无需 Provider。安装并导入样式后，组件即可直接使用。