Peeking Toast Stack
Toasts collapsed into a depth-scaled deck that fans out on hover.
DOM + CSS2 deps1 file · 3 KB TSX
Props
"use client";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { X } from "lucide-react";
type Toast = { id: number; title: string; body: string };
export function NotificationStackPeek({
toasts,
onDismiss,
peek = 9,
scaleStep = 0.05,
expandOnHover = true,
}: {
toasts: Toast[];
onDismiss: (id: number) => void;
/** Vertical offset per card while collapsed. */
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this pattern
A stack of toasts that collapses into a deck solves a real problem: three simultaneous notifications should not take three notifications' worth of screen. What makes it read as a deck rather than a short list is that depth changes both position and scale — each card sits slightly lower and slightly smaller than the one above it, which is enough perspective cue for the eye to interpret it as recession. Deriving those values from the card's index rather than hand-placing them is what keeps it correct when a fourth toast arrives. The unglamorous half is the container. Its height has to animate between the collapsed and expanded totals, because an absolutely-positioned stack inside a fixed-height box either reserves the full expanded height while collapsed — leaving a visible hole — or clips the fan when it opens. That single detail is the most common bug in implementations of this pattern. Real notifications need a live region too; the visual stack communicates nothing to a screen reader on its own.
Curator’s note
Built for viberdy 2.1. Animating the container height is the unglamorous half — skip it and the collapsed deck leaves a hole in your layout.