Installation

Motion-Primitives is built on top of two libraries:

• Framer Motion for animations
• Tailwind CSS for styling

This project is designed specifically for React projects.

Quick Start

1. Install Tailwind CSS

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

2. Install Framer Motion

npm install framer-motion

3. 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));
}

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