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