Installation

Install Tailwind CSS

The components are styled using Tailwind CSS.
Follow the official installation guide to set it up in your project.

Install Motion

To use components with animations, you’ll need to add Motion to your project.

npm install motion

Add a Utility Helper

To make it easier to conditionally apply Tailwind CSS classes, add this cn helper function to your project.

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Folder Structure

Here’s a recommended folder structure to organize your components and utilities:

Feel free to adapt it based on your project’s needs.