Card Stack Demo

1import { CardStack, CardStackItem } from "@/registry/loomui/card-stack"
2 
3const CARDS = [
4  {
5    step: "01",
6    title: "Cut",
7    body: "Measure against the thing you are making, not the roll it came off.",
8  },
9  {
10    step: "02",
11    title: "Pin",
12    body: "Lay it all out first. Sewing is where mistakes get expensive.",
13  },
14  {
15    step: "03",
16    title: "Sew",
17    body: "One seam at a time, pressed flat before the next one starts.",
18  },
19  {
20    step: "04",
21    title: "Finish",
22    body: "Hem, lining, label. The parts nobody sees are the parts holding it together.",
23  },
24]
25 
26export default function CardStackDemo() {
27  return (
28    <div className="w-full max-w-md">
29      {/* Measures against the nearest scrolling box, so a panel works too. */}
30      <div className="h-72 [scrollbar-width:none] overflow-y-auto rounded-xl [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
31        <CardStack offset={10} peek={18} tail={120}>
32          {CARDS.map((card) => (
33            <CardStackItem key={card.step}>
34              <div className="border-border bg-card mb-4 rounded-xl border p-6 shadow-sm">
35                <div className="text-muted-foreground font-mono text-xs">
36                  {card.step}
37                </div>
38                <h3 className="mt-3 text-lg font-medium">{card.title}</h3>
39                <p className="text-muted-foreground mt-2 text-sm">
40                  {card.body}
41                </p>
42              </div>
43            </CardStackItem>
44          ))}
45        </CardStack>
46      </div>
47 
48      <p className="text-muted-foreground mt-3 text-center text-xs">
49        Scroll inside the panel. It is a whole thing.
50      </p>
51    </div>
52  )
53}