Quickstart

Auto-generate your docs

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.

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

pnpm dlx rareui@latest init

yarn dlx rareui@latest init

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

Add a component

Add the liquid-button component — one of the simplest to get started with.

npx rareui@latest add liquid-button

pnpm dlx rareui@latest add liquid-button

yarn dlx rareui@latest add liquid-button

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

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>
  )
}

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.

Install dependencies

Install the packages that RareUI components depend on.

npm install framer-motion clsx tailwind-merge

pnpm add framer-motion clsx tailwind-merge

yarn add framer-motion clsx tailwind-merge

bun add framer-motion clsx tailwind-merge

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))
}

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": {
      "@/*": ["./*"]
    }
  }
}

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

⌘I

Get Started

Installation

Option 1: CLI (recommended)

Option 2: Manual copy-paste

What’s next?

​Option 1: CLI (recommended)

​Option 2: Manual copy-paste

​What’s next?

Option 1: CLI (recommended)

Option 2: Manual copy-paste

What’s next?