Installation

1. Create a Next.js Project

Start by creating a new Next.js project. We recommend including Tailwind CSS during the setup process for the quickest start.

npx create-next-app@latest my-ui-library --typescript --tailwind --eslint

If you have an existing project without Tailwind, you can install it manually.

Manual Tailwind Installation

Install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer

Next, generate your `tailwind.config.js` and `postcss.config.js` files:

npx tailwindcss init -p

2. Install Framer Motion

Framer Motion is a production-ready motion library for React. It provides a simple and declarative API to add animations to your components.

npm install framer-motion

3. Next Steps

Once these packages are installed, you re ready to start building your components. Remember that any component using Framer Motion s interactive features must be a Client Component by adding the use client; directive at the top of the file.