Installation

Prerequisites

You need a React project with Tailwind CSS configured. The component also uses:

• lucide-react for icons (ChevronLeft, ChevronRight, etc.)
• A cn utility function for classnames (standard in shadcn/ui projects)

Option 1: CLI Install

Use the shadcn CLI to add the component directly to your project:

pnpm dlx shadcn@latest add https://carouselcn.vercel.app/r/carousel.json

pnpm dlx shadcn@latest add @carouselcn/carousel

This will add carousel.tsx to your components/ui folder.

Option 2: Manual Copy

Copy the component code directly from the Carousel component page and paste it into your project at components/ui/carousel.tsx.

Make sure you have the cn utility. If not, create lib/utils.ts:

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

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

And install the dependencies:

npm install clsx tailwind-merge lucide-react

Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNavigation,
  CarouselIndicator,
} from "@/components/ui/carousel";

See the Carousel docs for full API reference and examples.