Toaster

A complete toast system: call toast(), toast.success() or toast.promise() from anywhere and a Toaster renders them as a collapsed deck that fans out on hover. Six positions, swipe or Escape to dismiss, timers that hold on hover and in hidden tabs, morphing icons when a promise settles, and Alt+T to jump to the stack.

Tags: toast toaster sonner stack promise swipe snackbar
Dependencies: motion(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

position
ToastPosition
Default "bottom-right"
expand
boolean
Default false
Keep the stack fanned out instead of collapsing it into a deck.
visibleToasts
number
Default 3
How many toasts show at once; older ones wait behind the deck.
duration
number
Default 4000
Default lifetime in milliseconds.
gap
number
Default 12
Space between toasts when the stack is fanned out.
offset
number
Default 24
Distance from the edges of the viewport (or the positioned parent).
strategy
"fixed" | "absolute"
Default "fixed"
absolute pins the stack inside the nearest positioned parent instead of the viewport.
closeButton
boolean
Default true
hotkey
{ altKey?: boolean; metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean; c…
Default { altKey: true, code: "KeyT" }
Keyboard shortcut that focuses the stack.

Prop	Type	Default	Description
position	ToastPosition	"bottom-right"
expand	boolean	false	Keep the stack fanned out instead of collapsing it into a deck.
visibleToasts	number	3	How many toasts show at once; older ones wait behind the deck.
duration	number	4000	Default lifetime in milliseconds.
gap	number	12	Space between toasts when the stack is fanned out.
offset	number	24	Distance from the edges of the viewport (or the positioned parent).
strategy	"fixed" \| "absolute"	"fixed"	`absolute` pins the stack inside the nearest positioned parent instead of the viewport.
closeButton	boolean	true
hotkey	{ altKey?: boolean; metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean; c…	{ altKey: true, code: "KeyT" }	Keyboard shortcut that focuses the stack.