---
title: Installation: Next.js
description: "Add AsheeUI to a Next.js project with App Router or Pages Router."
type: installation
section: Installation
order: 1
---
Add AsheeUI to a Next.js project with App Router or Pages Router.
---
## Create a project
If you're starting fresh, scaffold a Next.js app:
If you have an existing project, skip to the next step.
---
## Install packages
---
## Configure Tailwind
Add the AsheeUI styles import to your global CSS file. The CLI does this automatically, but if you're setting up manually:
**`app/globals.css`** or **`styles/globals.css`**
```css
@import "tailwindcss";
@import "asheeui/styles";
```
---
## Add the provider
### App Router
Wrap your root layout with `AsheeUIProvider`:
**`app/layout.tsx`**
```jsx
import type { Metadata } from "next";
import { AsheeUIProvider } from "asheeui";
export const metadata: Metadata = {
title: "My App",
};
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### Pages Router
Wrap your `_app.tsx` component:
**`pages/_app.tsx`**
```jsx
import type { AppProps } from "next/app";
import { AsheeUIProvider } from "asheeui";
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
```
---
## Framework-specific notes
- **`suppressHydrationWarning`**: Required on the `` element to prevent hydration mismatches from theme switching.
- **`"use client"`**: The provider is a client component. In App Router, layouts can be Server Components by default, but wrapping with `AsheeUIProvider` works because it's imported and used in the client-rendered body.
- **CSS import order**: The `@import "asheeui/styles"` must come after `@import "tailwindcss"` to ensure Tailwind utilities can override AsheeUI styles when needed.
---
## Verify it works
Render a Button in one of your pages:
```jsx
import { Button } from "asheeui";
export default function Home() {
return ;
}
```
You should see a styled button with the default theme. Open your browser's dev tools and check that the `asheeui` styles are loaded.