Dispatch
An imperatively-fired toast system: call toast() anywhere and one Toaster piles the results into a receding 3D stack — hover fans it to full rows, and each dismisses on timeout, click, or swipe-throw while the survivors exhale up one slot. Promise toasts morph the icon in place; a feed mode streams a masked column. role=status live regions, Escape-dismiss, reduced-motion-safe.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/dispatchManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| position | DispatchPosition | "bottom-right" | Corner the stack/feed anchors to. |
| mode | "stack" | "feed" | "stack" | "stack" piles toasts into a receding 3D stack; "feed" streams a masked column. |
| channel | string | "default" | Namespace — pair with toast(msg, { channel }) to drive multiple Toasters. |
| maxVisible | number | 3 | How many cards are visible in the collapsed pile before the rest hide behind. |
| stackOffset | number | 14 | Vertical peek between collapsed cards, in px. |
| scaleStep | number | 0.05 | Scale removed per card going back in the collapsed pile. |
| duration | number | 4000 | Auto-dismiss timeout in ms (loading toasts ignore it). |
| gap | number | 14 | Row gap when the stack fans out or in feed mode, in px. |
| swipeDistance | number | 90 | Horizontal throw distance that dismisses a toast, in px. |
| swipeVelocity | number | 480 | Horizontal throw velocity that dismisses regardless of distance, in px/s. |
| fanOnHover | boolean | true | Fan the collapsed pile into full rows on hover/focus. |
| pauseOnHover | boolean | true | Freeze auto-dismiss timers while the pointer is over the stack. |
| closeButton | boolean | true | Show a per-toast close button. |
| width | number | 356 | Card + feed width in px (clamped to the viewport). |
| container | HTMLElement | null | document.body (fixed) | Portal target. When provided (must be positioned) the Toaster is contained inside it — ideal for previews. |
| className | string |
Honors prefers-reduced-motion with a designed static fallback, and passes className through.