Carousel

Galleries 613

About

A customizable carousel with microinteractions and slider.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Carousel to your project and fits it to your theme.

Code

How Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}