Image Carousel

Galleries 2

About

Image Carousel

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

Code

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

Usage.tsx

import ImagePile from "@/components/ui/image-carousel";


export default function DemoOne() {
  const sampleImages = [
    "https://cdn.21st.dev/assets/mirror/3f/3fc1b7004e06a4d71c5d8dbdd848b6873c2389348a5ca19eec2b78c4eb29936a.jpg",
    "https://cdn.21st.dev/assets/mirror/d5/d5e46be1f334763d61d59fbbd833d2863ba787e36e92114754be081388d83b6b.jpg",
    "https://cdn.21st.dev/assets/mirror/8c/8c9ac43877b526c87e0ab1925fb4d6f30ef335a07691cc38a7a8ffdcf4b1c62a.jpg",
    "https://cdn.21st.dev/assets/mirror/b1/b12bc5381bfd53d0b047931c306329a6f33cc8f52d384f4edcf57b8a3460702e.jpg",
    "https://cdn.21st.dev/assets/mirror/43/43bf91e6957c556de56b6f8f777b9f426a538399d4479026c8afe1837f3216f3.jpg",
  ]

  return (
    <main className="w-full min-h-screen bg-background dark:bg-black flex items-center justify-center p-8">
      <div className="text-center">
        <h1 className="font-bold text-foreground mb-20 text-5xl overline">Image Carousel</h1>
        <ImagePile images={sampleImages} speed={3} />
      </div>
    </main>
  )
}