# Frameworks
**Category**: react
**URL**: https://www.blakeui.com/en/docs/react/getting-started/frameworks
**Source**: https://raw.githubusercontent.com/myblakebox/BlakeUI/refs/heads/main/apps/docs/content/docs/en/react/getting-started/(overview)/frameworks.mdx
> Integrate blakeUI with your framework
***
## Next.js
### 1. Create a Next.js project
```bash
npx @blakeui/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 blakeUI component
Example: `app/page.tsx`
```tsx
import {Button} from "@blakeui/react";
export default function HomePage() {
return (
);
}
```
Example: `pages/index.tsx`
```tsx
import {Button} from "@blakeui/react";
export default function HomePage() {
return (
);
}
```
blakeUI 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 `` element.
```tsx
// app/layout.tsx
import {headers} from 'next/headers';
import {isRTL} from '@blakeui/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 (
{children}
);
}
```
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 '@blakeui/react';
export function ClientProviders({lang, children}) {
return (
{children}
);
}
```
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 `` 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 @blakeui/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 blakeUI component
Example: `src/App.tsx`
```tsx
import {Button} from "@blakeui/react";
function App() {
return (
);
}
export default App;
```
blakeUI does not require a provider. Components work directly after installation and style import.
## Next steps
- [Quick Start](/docs/react/getting-started/quick-start) for the fastest setup path
- [Components](/docs/react/components) to explore all available components