Installation

Install Tailwind CSS

Components are styled using Tailwind CSS. Follow the official installation guide to add it to your project.

Install Motion

Components are animated using Motion.

npm install motion

Add the utility helper

Create a lib/utils.ts file to manage Tailwind CSS classes:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

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

Install icons

Add Lucide React icons:

npm install lucide-react

Project Structure

Here's the recommended project structure:

your-project/
├── components/
│   └── motion-ui/     # Motion components directory
├── lib/
│   └── utils.ts      # Utility functions

You're all set! You can now start enjoying the components.