Peeking Toast Stack
Toasts collapsed into a depth-scaled deck that fans out on hover.
- Category
- Patterns
- Added
- 2026-09-20
- Deps
- 2
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Hover to expand
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Toast Notification Stack
patternsA queue of toast notifications that stack, reflow, and auto-dismiss independently.
Swipe Card Stack
patternsA draggable deck of cards you flick away to cycle through, Tinder-style.
Link Peek Preview
patternsAn index list that floats a velocity-tilted preview card beside the pointer.