Is RareUI completely free to use?

Yes, RareUI is 100% free and open-source under the MIT license. You can use it in personal and commercial projects without any restrictions.

Do I need to install RareUI?

No installation required! Simply copy the component code and paste it into your project. You can also use our CLI tool: npx rareui add [component-name]

What frameworks does RareUI support?

RareUI components are built with React and work seamlessly with Next.js, Remix, Vite, and any React-based framework. They use Tailwind CSS for styling and Framer Motion for animations.

CLI

Use the CLI to add components to your project.

The RareUI CLI is the fastest way to add components to your project. It handles dependencies, configuration, and placement for you.

Init

Run the init command to initialize RareUI in your project. This will create a components.json file and configure your project for the best experience.

npx rareui@latest init

pnpm dlx rareui@latest init

yarn dlx rareui@latest init

bunx rareui@latest init

💡 Which command should I use?

Use the package manager you already have installed! Most users have npm (comes with Node.js).

Not sure which you have? Run these in your terminal:

npm --version    # ✅ Most common (comes with Node.js)
pnpm --version   # Fast alternative
yarn --version   # Classic choice
bun --version    # Fastest runtime

If you get a "command not found" error, that package manager isn't installed. Just use npm - it's installed by default with Node.js!

Common Error: pnpm is not recognized → Use npm instead:

npx rareui@latest init

Add

Use the add command to add components to your project. This command downloads the component code and places it in your components directory, installing any necessary dependencies automatically.

npx rareui@latest add [component]

pnpm dlx rareui@latest add [component]

yarn dlx rareui@latest add [component]

bunx rareui@latest add [component]

Examples

Add a single component (supports both PascalCase and kebab-case):

npx rareui@latest add particle-card
npx rareui@latest add LiquidButton

pnpm dlx rareui@latest add particle-card
pnpm dlx rareui@latest add LiquidButton

yarn dlx rareui@latest add particle-card
yarn dlx rareui@latest add LiquidButton

bunx rareui@latest add particle-card
bunx rareui@latest add LiquidButton

Add multiple components at once:

npx rareui@latest add particle-card liquid-button soft-button

pnpm dlx rareui@latest add particle-card liquid-button soft-button

yarn dlx rareui@latest add particle-card liquid-button soft-button

bunx rareui@latest add particle-card liquid-button soft-button

Install all available components:

npx rareui@latest add .

pnpm dlx rareui@latest add .

yarn dlx rareui@latest add .

bunx rareui@latest add .

View the list of available components:

npx rareui@latest add

pnpm dlx rareui@latest add

yarn dlx rareui@latest add

bunx rareui@latest add

Diff

Check for updates to your installed components and update them if needed.

npx rareui@latest diff

pnpm dlx rareui@latest diff

yarn dlx rareui@latest diff

bunx rareui@latest diff

Examples

Check a specific component:

npx rareui@latest diff liquid-button

pnpm dlx rareui@latest diff liquid-button

yarn dlx rareui@latest diff liquid-button

bunx rareui@latest diff liquid-button

Update without confirmation:

npx rareui@latest diff -y

pnpm dlx rareui@latest diff -y

yarn dlx rareui@latest diff -y

bunx rareui@latest diff -y

Options

Option	Description
`-y`, `--yes`	Skip confirmation prompt.
`-o`, `--overwrite`	Overwrite existing files.
`-c`, `--cwd <cwd>`	The working directory.
`-p`, `--path <path>`	The path to install the component to.
`-h`, `--help`	Display help for command.

FAQ

Does it work with other frameworks?

Currently, the CLI is optimized for Next.js and React projects using Tailwind CSS. Support for other frameworks is planned.

Can I use it without the CLI?

Yes! You can manually copy and paste the code from the documentation into your project. The CLI just automates this process.

Can I use both kebab-case and PascalCase for component names?

Yes! The CLI supports both formats:

npx rareui add liquid-button (kebab-case)
npx rareui add LiquidButton (PascalCase)

Both will install the same component. Use whichever format you prefer!

How do I know if my components need updates?

Run the diff command to check for updates:

npx rareui@latest diff

This will show you which components have updates available and what changed.

Where are components installed?

Components are installed to components/rareui/ in your project directory. For example:

Buttons: components/rareui/buttons/
Cards: components/rareui/cards/
Loaders: components/rareui/loaders/

What if I want to customize a component?

All components are installed as source code in your project, so you can customize them freely! Just edit the files in components/rareui/ after installation.

I'm getting "pnpm/yarn/bun is not recognized" error

This means the package manager isn't installed on your system. Solution: Use npm instead (comes with Node.js):

npx rareui@latest init
npx rareui@latest add liquid-button

Want to install that package manager?

pnpm: npm install -g pnpm
yarn: npm install -g yarn
bun: Visit bun.sh for installation

Most users just use npm - it works perfectly!

Which package manager should I use?

All package managers work perfectly with RareUI:

npm: Built-in with Node.js, most widely used
pnpm: Faster, more disk-efficient
yarn: Great workspace support
bun: Fastest JavaScript runtime

Choose the one you prefer or the one your project already uses!

Previous Next