-Unify Components

Explore the extensive collection of unified UI components.

Installation Guide

Follow this guide to set up Next.js with Tailwind CSS, utilities, and configuration for a new project.

Install Next.js

Install Next.js with create-next-app.

1. Create a New Project

Run the following command to create a new Next.js project:

npx create-next-app@latest

Prompts You Will See

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes

Start the App

cd my-app
npm run dev

Add Utilities

Install common utilities for handling classnames and animations.

Install Dependencies

$ npm i framer-motion clsx tailwind-merge

Add Utility Function

Add the following utility function to handle merging classes:

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

Base Tailwind Config

Add a base Tailwind config to enable dark mode and setup global CSS variables for color.

import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
import { Config } from "tailwindcss";
const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [addVariablesForColors],
};
 // This plugin adds each Tailwind color as a global CSS variable,
            e.g. var(--gray-200).
{
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  );
  addBase({
    ":root": newVars,
  });
}

Next.js 15 & React 19 Framer Motion Fix

Apply the following fixes to ensure compatibility between Next.js 15, React 19, and Framer Motion.

"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"
  }
}

if you're using motion instead of framer-motion, you can make the following changes:

"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"
  }
}