ToastStack

Stacked toast notifications that fan out on hover or focus.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/toast-stack.json

React
import ToastStack from "@/components/fx/toast-stack"

<ToastStack toasts={toasts} onDismiss={(id) => remove(id)} />

A labelled region with a polite live list: new toasts are announced without stealing focus.
Every toast has a labelled dismiss button; focusing the stack fans all toasts out so each is reachable.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows toasts without sliding.

Prop	Type	Default	Description
toasts	{ id, title, description? }[]	—	Toasts, oldest first.
onDismiss	(id) => void	—	Called by each close button.
label	string	'Notifications'	Accessible name for the region.
visible	number	3	Toasts visible while collapsed.