Progress toast stackPro
Stacked toasts for background generations with live progress, an elapsed timer, the outcome in words, and swipe to dismiss.
On this page
ProStart background jobs and watch them stack, fan out on hover and swipe away when done.
Installation
Usage
import { ProgressToastStack } from "@/components/ui/chatcn/pro/progress-toast-stack"
<ProgressToastStack items={jobs} onDismiss={remove} onCancel={cancel} />The stack is controlled: your app owns the jobs and passes them in, oldest first, the newest in front. Leave progress out while a job cannot tell, and its bar runs indeterminate. Finished jobs leave on their own after finishedDuration; running ones only go when canceled on purpose.
Examples
Every status
ProQueued, running with and without a percent, done, failed and canceled.
Props
| Prop | Type | Notes |
|---|---|---|
items | ProgressToastItem[] | Oldest first |
onDismiss | (id) => void | Swipe, close, or a finished job timing out |
onCancel | (id) => void | Adds cancel to queued and running jobs |
position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | Default bottom-right |
strategy | "fixed" | "absolute" | absolute stays inside a positioned parent |
visible | number | Cards in the collapsed stack. Default 3 |
finishedDuration | number | Ms a finished job stays. Default 6000 |
expand | boolean | Always fanned out |
Accessibility
- Progress is a named
progressbarper job and is never announced; when a job ends, a polite live region says its title and outcome once. - The stack fans out on keyboard focus as well as hover, and finished jobs' timers pause while it is open.
- Failed jobs say why and how to fix it, with the retry as the one action.
Motion
- Cards enter from the edge with transform and opacity over 400 ms, stack 14 px apart at 5% less scale each, and fan out on hover. Exits take 200 ms.
- A swipe follows the pointer and leaves the way it was thrown past 45 px or a quick flick; vertical scrolling still works.
- Reduced motion keeps opacity fades only.