DocsIntroduction

Static and Animated Component Collection

Used with Next.js, TailwindCSS and sometimes with Framer-Motion. All components fully support light and dark modes

Author: @lukachodonadze

Requirements

Next.js
TailwindCSS
Framer Motion (sometimes)
next-themes (optional)

Go ahead and create required functions and install deps.

Font - Geist Sans

npm i geist

Dependencies

npm i clsx tailwind-merge framer-motion

Create @/utils/cn.ts file

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

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

This cn function merges tailwind classes. Very helpful if you want to edit classNames through props.