Installation

Install Tailwind CSS (if you don’t have it yet)

Shadcn-Extras works with Tailwind v3 or v4.
Follow the official guide if Tailwind isn’t set up:

• Tailwind v3: https://v3.tailwindcss.com/docs/installation
• Tailwind v4: https://tailwindcss.com/docs/installation/framework-guides

If you already have Tailwind, you can skip this step.

Install Motion

All animations use Motion.

npm install motion

Install Icons

Some examples use Lucide.

npm install lucide-react

Utility helper (only if you DON’T already have `cn`)

If your project already uses shadcn/ui, you likely have cn in @/lib/utils.
Skip this step if cn already exists.

Otherwise, install small utilities and add the helper:

npm install clsx tailwind-merge

Create lib/utils.ts:

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

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

Add your first component

Use the CLI to add a component into your project (files are copied so you can edit freely):

npx shadcn-extras@latest add kpi-card

This command will add KPI Card to your app (under `components/`).
You can then import it anywhere in your project.

Manual install? You can also copy code directly from each component page.