Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Codewithswappy/RareUI/llms.txt
Use this file to discover all available pages before exploring further.
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
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. 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
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
Add scripts to 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:export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
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.{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
@/components/rareui/liquid-button instead of relative paths like ../../components/rareui/liquid-button. Next steps
