Installation

Step 1: Install Tailwind CSS

Components are styled using Tailwind CSS v4. Follow the official installation guide to add it to your project.

If you are using React with Vite (TS), you can follow this vite TS guide and for React (JS) follow this vite JS guide.

Step 2: Install Motion

Components are animated using Motion. Check the required dependencies first.

npm install motion

npm install motion

Step 3: Add the utility helper

Create a lib/utils.ts file to manage Tailwind CSS classes:

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

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

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

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

You'll also need to install the required dependencies:

npm install clsx tailwind-merge

npm install clsx tailwind-merge

Step 4: Install icons

Add Lucide React icons:

npm install lucide-react

npm install lucide-react

Step 5: That's it

You can now start adding components to your project.

npx shadcn@latest add "https://aurora-ui-opal.vercel.app/c/button.json"

npx shadcn@latest add "https://aurora-ui-opal.vercel.app/c/button.json"

The command above will add the Button component to your project. You can then import it anywhere in your project.

There is also an option to add components manually via copying from the Component Page.