Skip to main content
This guide walks you through adding a RareUI component to an existing Next.js project. If you don’t have a project yet, follow Install Next.js first.

​
Option 1: CLI (recommended)

The CLI handles file placement, dependency installation, and configuration automatically.
1

Initialize RareUI

Run the init command from your project root. This creates a components.json file that configures paths and aliases.
npx rareui@latest init
You’ll see a confirmation prompt if components.json already exists. After initialization, the file contains your project’s path aliases and registry configuration.
2

Add a component

Add the liquid-button component — one of the simplest to get started with.
npx rareui@latest add liquid-button
The CLI downloads the component source to components/rareui/ and installs any required dependencies (framer-motion, clsx, tailwind-merge) automatically.
3

Use the component

Import and render the component in any page or layout file.
app/page.tsx
import { LiquidButton } from "@/components/rareui/liquid-button"

export default function Page() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <LiquidButton>Get started</LiquidButton>
    </main>
  )
}
4

Start the dev server

npm run dev
Open http://localhost:3000 to see the liquid button rendered with its gooey animation.

​
Option 2: Manual copy-paste

If you prefer not to use the CLI, you can copy component code directly from the documentation.
1

Install dependencies

Install the packages that RareUI components depend on.
npm install framer-motion clsx tailwind-merge
2

Create the utility function

Create lib/utils.ts with the cn() helper. All RareUI components use this for conditional class merging.
lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
3

Create the component file

Create a file at components/rareui/liquid-button.tsx and paste the component source from the Liquid Button component page.The component will use your @/lib/utils import path, so make sure your tsconfig.json has the @/* path alias configured:
tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
4

Import and use

app/page.tsx
import { LiquidButton } from "@/components/rareui/liquid-button"

export default function Page() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <LiquidButton>Get started</LiquidButton>
    </main>
  )
}

​
What’s next?

  • Read the CLI reference to learn all available commands and flags
  • Explore all component categories in the sidebar
  • Run npx rareui@latest add (no component name) to see the full list of available components

Build docs developers (and LLMs) love

Get started for freeTalk to us