# Sticky stack (goodtabs UI)

Cards stick and pile over each other, the one underneath easing back as the next lands.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/sticky-stack.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/sticky-stack`

## Usage

```tsx
import { StickyStack, StickyStackCard } from "@/components/ui/sticky-stack"

<StickyStack aria-label="How it works">
  <StickyStackCard eyebrow="Step 01" title="Plan" description="One line on the step.">
    <img src="/plan.jpg" alt="" className="absolute inset-0 size-full object-cover" />
  </StickyStackCard>
</StickyStack>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| top | `number` | `64` | Distance from the top of the window to the first card, in px. |
| peek | `number` | `12` | How much of each card stays visible above the next, in px. |
| eyebrow | `string` |  | Short mono label on StickyStackCard. |
| title | `ReactNode` |  | The card's heading, required on StickyStackCard. |
| description | `ReactNode` |  | One grey line under the title. |
| children | `ReactNode` |  | The visual on the right of the card, positioned to fill it. |

## When to use

- Three to five ideas that build on each other
- A feature tour where each card deserves the full window
- A process you want to leave piled up, as a sense of progress

## When not to use

- For content people need to compare: a grid keeps everything visible
- Cards taller than the window, because the bottom gets covered before it is read
- Inside any overflow container, which turns position sticky off

## Notes for agents

- GSAP installs from npm under GSAP's own licence. No GSAP code ships in this registry
- The stack is plain CSS sticky, so it works with no script and under reduced motion; GSAP adds only the scale and the shade
- No ancestor may set overflow hidden, auto or scroll, or sticky stops working
- Set top to the height of any fixed header. The list ends in an after spacer so the last card can land and hold; padding cannot do this, because sticky stops at the content box

## The maths

- Each card sticks at top + i × peek, so 64 + 3 × 12 = 100px for the fourth card.
- Scale is 1 - 2 × peek × depth / width, so each level insets 12px a side and the deck corners sit on a 45 degree line at any width.

Docs: https://ui.goodtabs.co/components/sticky-stack