Card Overlap Scroll

Installation

npx shadcn@latest add http://localhost:3000/labs/r/card-overlap-scroll.json

yarn dlx shadcn@latest add http://localhost:3000/labs/r/card-overlap-scroll.json

pnpx shadcn@latest add http://localhost:3000/labs/r/card-overlap-scroll.json

bunx shadcn@latest add http://localhost:3000/labs/r/card-overlap-scroll.json

Usage

page.tsx

import { OverlapCards } from "@/components/card-overlap-scroll";

export default function CardOverlapScrollPage() {
  return (
    <OverlapCards
      cards={[
        {
          description: "step 1",
        },
        {
          description: "step 2",
        },
        {
          description: "step 3",
        },
        {
          description: "step 4",
        },
        {
          description: "step 5",
        },
      ]}
      className="bg-background min-h-[800px] w-full"
    />
  );
}