---
title: "Install in Next.js"
description: "Set up cladd in a Next.js project, app router or pages router."
links:
doc: https://cladd.io/react/installation/next/
---
# Install in Next.js
Cladd works in both Next.js routers. Pick the section that matches your app.
## Create a new project
If you're starting from scratch:
```bash
npx create-next-app@latest my-app
cd my-app
```
Answer **yes** to TypeScript and Tailwind. The Next CLI scaffolds Tailwind v4 with the `@tailwindcss/postcss` plugin and a `globals.css` entry — that's exactly what cladd expects.
## Install cladd
```bash
npm install @cladd-ui/react
```
## Import the stylesheet
Open `app/globals.css` (App Router) or `styles/globals.css` (Pages Router) and add cladd's stylesheet **after** Tailwind's:
```css
@import 'tailwindcss';
@import '@cladd-ui/react/css';
```
Order matters — cladd's `@theme` tokens need Tailwind's layers in place before they can extend them.
## Wrap your app in CladdProvider
The provider publishes the theme, accent color, and overlay portals to the rest of the tree. Where it goes depends on which router you're using.
### App Router
[`CladdProvider`](/react/components/cladd-provider/) uses React context and renders portals, so it must live in a client component. Create `app/providers.tsx`:
```tsx
'use client';
import { CladdProvider } from '@cladd-ui/react';
import type { ReactNode } from 'react';
export function Providers({ children }: { children: ReactNode }) {
return {children};
}
```
Then wrap `app/layout.tsx`:
```tsx
import './globals.css';
import { Providers } from './providers';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
You don't need `'use client'` on every page that uses cladd components — only the parts that actually call hooks or attach event handlers need it. Static cladd markup (`