Installation

Start with a Next.js application configured with Tailwind CSS:

npx create-next-app@latest my-app --typescript --tailwind --app

Install the utility libraries for class merging and the animation runtime:

npm install clsx tailwind-merge motion

Create lib/utils.ts to merge Tailwind classes cleanly:

1import { clsx, type ClassValue } from "clsx";
2import { twMerge } from "tailwind-merge";
3
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

Use the shadcn CLI to copy any component directly into your project:

npx shadcn@latest add fujiDevv/calamansi-ui/calamansi

You can also use bun: bunx --bun shadcn@latest add fujiDevv/calamansi-ui/calamansi