Skip to main content
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.
1

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
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.
2

Start the development server

Navigate into the project directory and start the dev server.
cd my-app
npm run dev
3

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:
1

Run the command

npx create-next-app@latest
2

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.
1

Install packages

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

Add scripts to package.json

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}
3

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.
1

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.
2

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

Build docs developers (and LLMs) love

Get started for freeTalk to us