Installation
Install Tailwind CSS
Components are styled using 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 add "https://motion-primitives.com/c/text-effect.json"
The command above will add the Text Effect 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.