# Installation
Assisted or manual installation in React with Next.js.
## Choose how to get started
This page explains web installation with Next.js. Use the assistant or follow the manual steps. React without Next.js and React Native have separate guides.
- [@kivora/init assistant](https://kivora.pro/docs/inicializador)
- [Install in React web without Next.js](https://kivora.pro/docs/instalacion-react)
- [Install in React Native](https://kivora.pro/docs/instalacion-react-native)
```bash
npx @kivora/init --framework nextjs
```
## Before you begin
Manual installation requires a Next.js project with React and React DOM 18 or later. Kivora includes compiled CSS, so this approach does not require Tailwind or PostCSS. The @kivora/init 0.1.1 assistant configures Tailwind 4.1–4.x and requires Node.js 20.19+ and Next.js 13+.
The following steps assume app/ is at the root. Preserve your existing plugins, styles and providers when integrating the configuration.
## 1. Install manually from npm
You can also use npx @kivora/init for assisted installation. Add --dry-run to review proposed changes before applying them. @kivora/theme is a transitive dependency; declare it as a direct dependency too if you import it in your code.
```bash
npm install @kivora/nextjs
```
## 2. Add the styles
The stylesheet includes component classes, tokens, base styles and bundled assets. Import it once. It needs no @source or PostCSS configuration. Use CSS or style for custom styles; new Tailwind classes need your own compiler.
```tsx
@import "@kivora/nextjs/styles.css";
```
## Optional: if your application already uses Tailwind
Use this entry instead of styles.css if you already have Tailwind 4.1+ and its compiler configured. It generates your own utilities and detects Kivora classes automatically. Do not import both entries.
```tsx
@import "@kivora/nextjs/tailwind.css";
```
## 3. Configure Next.js
```tsx
import type { NextConfig } from "next";
const config: NextConfig = {
transpilePackages: ["@kivora/nextjs", "@kivora/theme"],
};
export default config;
```
## 4. Mount the provider
```tsx
"use client";
import type { ReactNode } from "react";
import { KivoraProvider } from "@kivora/nextjs";
export default function Providers({ children }: { children: ReactNode }) {
return {children};
}
```
## 5. Connect the layout
The layout can remain a Server Component. Use "use client" in components that manage state, events or browser APIs. You can now import Button and start composing.
```tsx
import type { ReactNode } from "react";
import Providers from "./providers";
import "./globals.css";
export default function RootLayout({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
## If you use Pages Router
Keep your existing Next.js configuration. Import @kivora/nextjs/styles.css and mount KivoraProvider in pages/_app.tsx. You do not need Tailwind, PostCSS or @source.
Source: https://kivora.pro/docs/instalacion