Installation

Install Next.js

To install Next.js using Create Next App, run the following command in your terminal:

npx create-next-app@latest

Install Tailwind CSS

The components are styled using Tailwind CSS v4. Follow the official guide to install it in your project.

Install Dependencies

Components are animated using Motion.

npm i motion clsx tailwind-merge

Add the utility file

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

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

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

Next.js 15 and React 19 Framer Motion Fix

To use Framer Motion (now called motion in v12) with Next.js 15 and React 19, follow these configuration changes. Currently, Framer Motion's stable releases aren't compatible with React 19, so we need to use the alpha version and override React dependencies.

"dependencies": {
  "framer-motion": "^12.0.0-alpha.1",
  "next": "15.0.3",
  "react": "19.0.0-rc-66855b96-20241106",
  "react-dom": "19.0.0-rc-66855b96-20241106",
  "tailwind-merge": "^2.5.5"
},
"overrides": {
  "framer-motion": {
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106"
  }
},

Note for Framer Motion v12 Users If you're using the new motion package name (v12+), update your configuration accordingly:

"dependencies": {
  "motion": "^12.0.0-alpha.1",
  "next": "15.0.3",
  "react": "19.0.0-rc-66855b96-20241106",
  "react-dom": "19.0.0-rc-66855b96-20241106",
  "tailwind-merge": "^2.5.5"
},
"overrides": {
  "motion": {
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106"
  }
},