"use client";
import { Carousel } from "@/components/ui/carousel";
export function CarouselDemo() {
const slideData = [
{
title: "Mystic Mountains",
button: "Explore Component",
src: "https://cdn.21st.dev/assets/mirror/3c/3ccccbb9042f2f6a7b8864c2aca8ced5f4a1848b0d64a7535ef2c47ca313dbe4.jpg",
},
{
title: "Urban Dreams",
button: "Explore Component",
src: "https://cdn.21st.dev/assets/mirror/0b/0b19c5c1fabaec64306b1368da5b246f8ccd4d28d538ce6fea29d47374c0abc0.jpg",
},
{
title: "Neon Nights",
button: "Explore Component",
src: "https://cdn.21st.dev/assets/mirror/a7/a781c2e377386d36e14d4bed3fce3c1f9fb74e256c10a9e0af991c8b28d22ddb.jpg",
},
{
title: "Desert Whispers",
button: "Explore Component",
src: "https://cdn.21st.dev/assets/mirror/3c/3cc06c2fa3b6c073558c2205349c6a8a92b5d6f74521739f0edc660639d3e3c2.jpg",
},
];
return (
<div className="relative overflow-hidden w-full h-full py-20">
<Carousel slides={slideData} />
</div>
);
}
Part of Aceternity UI — browse the full library on 21st.dev.