Box Carousel
3D box/cube carousel with drag, autoplay, and keyboard navigation support.
Showing item 1 of 5: Image 1




"use client";
import { useRef } from "react";
import BoxCarousel, { type BoxCarouselRef, type CarouselItem } from "@/components/vritti/box-carousel";
const items: CarouselItem[] = [
{ id: "1", type: "image", src: "/placeholder.jpg", alt: "Image 1" },
{ id: "2", type: "image", src: "/placeholder.jpg", alt: "Image 2" },
{ id: "3", type: "image", src: "/placeholder.jpg", alt: "Image 3" },
{ id: "4", type: "image", src: "/placeholder.jpg", alt: "Image 4" },
{ id: "5", type: "image", src: "/placeholder.jpg", alt: "Image 5" },
];
export function BoxCarouselExample() {
const carouselRef = useRef<BoxCarouselRef>(null);
return (
<div className="w-full h-[400px] flex flex-col items-center justify-center gap-4">
<BoxCarousel
ref={carouselRef}
items={items}
width={400}
height={300}
direction="left"
autoPlay
autoPlayInterval={3000}
/>
<div className="flex gap-2">
<button
onClick={() => carouselRef.current?.prev()}
className="px-4 py-2 bg-foreground text-background rounded-md"
>
Prev
</button>
<button
onClick={() => carouselRef.current?.next()}
className="px-4 py-2 bg-foreground text-background rounded-md"
>
Next
</button>
</div>
</div>
);
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/box-carousel"
Dependencies
pnpm add motion