127 Components
Toast Stack
OverlaysStacked viewport notification toasts supporting 6 viewport positions (top/bottom + left/center/right), hover fan-out, and auto-dismiss.
Viewport Position (0 active)
bottom-right
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/toast-stack.json"
Props
TypeScript props supported by <ToastStack />.
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Viewport placement where the toast stack is anchored. |
| initialToasts | ToastItem[] | [] | Initial array of toast notifications rendered in the stack. |
| maxVisible | number | 4 | Maximum number of toasts visible in the stack at once. |
| autoDismiss | boolean | true | Automatically dismisses toasts after duration (pauses while hovering). |
| duration | number | 4500 | Time in milliseconds before a toast auto-dismisses. |
| viewportPortal | boolean | true | Renders the toast stack into document.body at z-[9999]. |
| className | string | — | Additional CSS classes applied to the control panel wrapper. |
Key Features
- Supports 6 viewport positions: top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
- Renders in a top-level React portal (z-9999) with auto-dismiss that pauses on hover.
- Expands smoothly into a full list when hovering over the stacked notifications.
Keyboard & Accessibility
- Uses role='region' and aria-live='polite' so screen readers announce incoming toasts.
- Each toast includes a keyboard-accessible dismiss button with aria-label.
- Respects prefers-reduced-motion for entry and exit transitions.