# Frameworks · HeroUI

> Integrate HeroUI with your framework

- Page: https://jiguang132.com/systems/heroui/docs/getting-started/frameworks
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Next.js

### 1. Create a Next.js project

```bash
npx heroui-cli@latest init
```


> 
  When prompted, select the **App** or **Pages** template. Then open your new folder and install dependencies (for example `pnpm install`).


### 2. Use your first HeroUI component


  

#### App Router


    Example: `app/page.tsx`

    ```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 Router


    Example: `pages/index.tsx`

    ```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 does not require a provider. Components work directly after installation and style import.


### 3 Locale Setup (Optional)

To integrate with Next.js, ensure the locale on the server matches the client.

In your root layout, determine the user's preferred language and set the `lang` and `dir` attributes on the `<html>` element.

```tsx
// 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>
  );
}
```

Create `app/provider.tsx`. This should render an `I18nProvider` to set the locale used by React Aria.

```tsx
// app/provider.tsx
"use client";

import {I18nProvider} from '@heroui/react';

export function ClientProviders({lang, children}) {
  return (
    <I18nProvider locale={lang}>
      {children}
    </I18nProvider>
  );
}
```

If you are using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) (CSP) with a nonce, add a `<meta property="csp-nonce">` tag to your document head, setting the content attribute to the generated nonce value. React Aria automatically reads the nonce from this tag.

## Vite

### 1. Create a Vite project

```bash
npx heroui-cli@latest init
```


> 
  When prompted, select the **Vite** template. Then open your new folder and install dependencies (for example `pnpm install`).


### 2. Use your first HeroUI component

Example: `src/App.tsx`

```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 does not require a provider. Components work directly after installation and style import.


## Next steps

- [Quick Start](/systems/heroui/docs/getting-started/quick-start) for the fastest setup path
- [Themes](/systems/heroui/docs/getting-started/theming) to customize colors and tokens
- [Components](/systems/heroui/docs/components) to explore all available components

---

Index of all JGuang resources: https://jiguang132.com/llms.txt