Install Next.js

Auto-generate your docs

RareUI components are designed for React projects using the App Router. This page covers everything you need to get a Next.js project ready.

System requirements

Before you begin, ensure your environment meets these requirements:

Node.js 18.17 or later
macOS, Windows (including WSL), or Linux

Quick setup

The fastest path is the automatic setup tool, which scaffolds everything in one command.

Create a new project

Run the following command to create a new Next.js app. The --yes flag accepts all recommended defaults: TypeScript, Tailwind CSS, ESLint, App Router, Turbopack, and the @/* import alias.

npx create-next-app@latest my-app --yes

pnpm create next-app my-app --yes

yarn create next-app my-app --yes

bun create next-app my-app --yes

The --yes flag uses saved preferences or Next.js defaults. If you want to choose settings interactively, omit the flag and answer the prompts — just make sure to select Tailwind CSS: Yes.

Start the development server

Navigate into the project directory and start the dev server.

cd my-app
npm run dev

Open in your browser

Visit http://localhost:3000 to confirm the app is running. You should see the Next.js default welcome page.

Interactive setup

If you prefer to configure each option manually, run the command without --yes:

Run the command

npx create-next-app@latest

pnpm create next-app

yarn create next-app

bun create next-app

Answer the prompts

You’ll be asked a series of questions. For RareUI compatibility, select these options:

What is your project named? my-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? No
Would you like to use App Router? Yes
Would you like to use Turbopack for next dev? Yes
Would you like to customize the import alias? No

Select Tailwind CSS: Yes. RareUI components rely on Tailwind utility classes and will not render correctly without it.

Manual installation

If you need to add Next.js to an existing project, follow these steps.

Install packages

npm install next@latest react@latest react-dom@latest

pnpm add next@latest react@latest react-dom@latest

yarn add next@latest react@latest react-dom@latest

bun add next@latest react@latest react-dom@latest

Add scripts to package.json

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

Create the app directory

Next.js uses file-system routing. Create an app/ directory and add a layout.tsx file:

app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Then create a page.tsx:

app/page.tsx

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

TypeScript setup

RareUI components are written in TypeScript. We strongly recommend using TypeScript for the best experience.

Enable TypeScript

If you used create-next-app with TypeScript enabled (the default), you already have a tsconfig.json. If not, rename any .js file to .tsx and run next dev — Next.js automatically creates the tsconfig.json.

Configure path aliases

Ensure your tsconfig.json has the @/* path alias configured. This is required for RareUI component imports.

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

With this alias, you can import components as @/components/rareui/liquid-button instead of relative paths like ../../components/rareui/liquid-button.

Next steps

Install Tailwind CSS — verify your Tailwind setup
Add utilities — install framer-motion and the cn() helper
CLI — use the CLI to add components

⌘I

Get Started

Installation

Install Next.js

System requirements

Quick setup

Interactive setup

Manual installation

TypeScript setup

Next steps

​System requirements

​Quick setup

​Interactive setup

​Manual installation

​TypeScript setup

​Next steps

System requirements

Quick setup

Interactive setup

Manual installation

TypeScript setup

Next steps