Installation

1. Create a new React project

If you don't have a project yet, scaffold one with Next.js:

1npx create-next-app@latest my-app --typescript --tailwind --eslint

2. Install peer dependencies

These packages are used across RankFlow UI components. Individual component pages list any additional dependencies they need.

1npm install motion clsx tailwind-merge

3. Add the utility helper

Create a lib/utils.ts file in your project:

1import { clsx, type ClassValue } from "clsx";
2import { twMerge } from "tailwind-merge";
3
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

Add components via CLI

The fastest way to install. The CLI fetches the component source and places it directly into your project.

1npx rankflow-ui@latest add <component-name>

For example, to add the Animated Border Button:

1npx rankflow-ui@latest add animated-border

List available components

1npx rankflow-ui@latest list

Manual Installation

Every component page includes the full source code. Copy it into your components/ui/ directory and import it directly.

1your-project/
2├── components/
3│   └── ui/
4│       ├── animated-border.tsx
5│       ├── glow-button.tsx
6│       └── ...
7├── lib/
8│   └── utils.ts
9└── ...