Manual Installation Setup

If you're not using shadcn/ui, you can install the components manually. Follow the steps below to prepare for the components manual installation.

Install dependencies

npm install tailwind-merge clsx react-dropzone lucide-react

Some components (multi-image, multi-file, avatar and upload button) also use the shadcn/ui Button at @/components/ui/button.

The enter animations use classes from tw-animate-css. Without it, the components work the same, just without the animations.

Add the cn helper

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

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

Start adding the components

Now you can follow the manual installation guide for the components you need.