Setup

You don't need to install it as a dependency instead you can simply copy and paste the code, as shadcn/ui, into your project. However, you still need to install the other dependency that the code needs.

Requirements

1. TailwindCSS: We use TailwindCSS for styling. See the TailwindCSS documentation for more information.

2. Framer Motion : All of the animations and animated components are using Framer Motion. See the Framer Motion documentation for more information.

3. Lucide Icons or Radix Icon (Optional): Some components use Lucide Icons or Radix Icons. You can use any other icon library or SVG icons as well.

Setting up

Folder structure

The project assumes that you have the following structure:

/
  /components
  /ui

where / is the root of your project, /components is where you keep your components and the project has been set up using paths in the tsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

The root of your project can be anything (like src or app), but the components folder should be at the root level.

Install basic dependencies

Install the required dependencies, if you haven't already:

npm install tailwind-merge clsx lucide-react tailwindcss-animate

Add tailwindcss-animate to the plugins array in your tailwind.config.js file:

module.exports = {
  plugins: [require("tailwindcss-animate")],
};

Create utils.ts file

Create utils.ts file in the libs folder and paste the following code:

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

Copying the code

1. If you are copying the dependency installation or file creation command make sure to use the copy button as it provides multiple options to copy the code.

2. If you copy any code from the documentation, and in the className you see a class center. It is a custom class that we have created for centering the content. You can create your own or use the following code:

.center {
  @apply flex items-center justify-center;
}