Installation

Install Tailwind CSS

Follow the official installation guide to add it to your project.

Install Motion

Components are animated using Motion.

npm install motion

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))
}

Install icons

Add Lucide React icons:

npm install lucide-react

That's it

You can now start adding components to your project.

npx shadcn@latest add "https://www.solaceui.com/r/hero-video.json"

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

You can also choose manual installation and copy the code from the components page.