Card Stack

import { CardStack, CardStackItem } from "@/components/ruixen/card-stack";
 
const items: CardStackItem[] = [
  {
    id: 1,
    title: "Luxury Performance",
    description: "Experience the thrill of precision engineering",
    imageSrc: "/images/card-01.jpg",
    href: "#",
  },
  {
    id: 2,
    title: "Elegant Design",
    description: "Where beauty meets functionality",
    imageSrc: "/images/card-02.jpg",
    href: "#",
  },
  {
    id: 3,
    title: "Power & Speed",
    description: "Unleash the true potential of the road",
    imageSrc: "/images/card-03.jpg",
    href: "#",
  },
];
 
export default function App() {
  return (
    <div className="min-h-screen w-full bg-zinc-950 text-white p-8">
      <CardStack
        items={items}
        initialIndex={0}
        autoAdvance
        intervalMs={3000}
        pauseOnHover
        showDots
      />
    </div>
  );
}

type CardStackItem = {
  id: string | number;
  title: string;
  description?: string;
  imageSrc?: string;
  href?: string;
  ctaLabel?: string;
  tag?: string;
};

<CardStack
  items={items}
  renderCard={(item, { active }) => (
    <div className={`p-6 ${active ? "bg-blue-500" : "bg-gray-800"}`}>
      <h3 className="text-xl font-bold">{item.title}</h3>
      <p className="text-sm opacity-80">{item.description}</p>
    </div>
  )}
/>

// Wider fan spread
<CardStack items={items} spreadDeg={72} overlap={0.3} />
 
// Tighter stack
<CardStack items={items} spreadDeg={24} overlap={0.6} />

// Larger cards
<CardStack items={items} cardWidth={640} cardHeight={400} />
 
// Smaller cards
<CardStack items={items} cardWidth={320} cardHeight={200} />