# Toast Stack

Several toasts, staggered in time, that close up smoothly as each one leaves: a running sum of occupancy-weighted heights, no measured DOM.

```bash
npx shadcn add https://www.reelcn.dev/r/toast-stack.json
```

Usage:

```tsx
<ToastStack
  toasts={[
    { at: 0, toast: { variant: "success", title: "Deployed", description: "Live in 12 regions" } },
    { at: 1.2, toast: { variant: "info", title: "Cache warmed" } },
    { at: 2.4, toast: { variant: "success", title: "Health check passed" } },
  ]}
/>
```

Use for:

- Several sequential confirmations or status updates in one product demo
- Simulating a busy notification tray without hand-placing each card

Avoid:

- A single notification. Use `toast`

Dependencies:

- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| toasts | `{ at: number; toast: Omit<ToastProps, "edge">; holdFrames?: number; }[]` | — | Seconds, per toast, and its own `Toast` props (minus `edge`, shared by the whole stack). |
| edge? | `"top" \| "top-right" \| "bottom" \| "bottom-right"` | — |  |