Toast Kit
Promise-API toasts with auto type switching, a priority queue, undo-actions with a progress timer, grouping, headless mode, and a full design system.
Flexible design system and full customisation
Over 30 CSS custom properties (--vtk-*) control colours, fonts, spacing, shadows, and animations. Built‑in light, dark, and system themes, plus the ability to pass a token object directly to the ToastContainer theme prop. This lets you adapt toast appearance to any brand without overriding styles or using !important.
Positioning, animations, and stack mode
Six preset positions (top/bottom + left/center/right) with smooth CSS enter/exit animations (slide + fade) for each position. Stack mode (Sonner‑style) visually collapses multiple toasts into a stack, showing up to two ghost cards behind the active one, which expand on hover. Supports prefers‑reduced‑motion.
Grouping, icons, slots, and touch interaction
Toasts with the same groupKey collapse into one with a +N counter that expands on click. Built‑in icons for each type (replaceable with a custom component or emoji). Full override via slots: from the entire toast to individual parts — icon, content, buttons, and progress bar. Supports swipe‑to‑dismiss on touch devices and RTL layout.
Promise API with auto‑switching and Undo with progress
toast.promise() automatically switches a toast from loading to success or error, returning the original promise for await. toast.undo() creates a toast with an animated progress bar and undo button: clicking the button calls onUndo and closes the toast; timer expiry confirms the action via onAutoClose. Async callbacks are supported.
Priority queue, isolated contexts, and SSR
Four priority levels (critical, high, normal, low) control the queue: high‑priority toasts preempt low‑priority ones when the visible limit is reached. createToastContext() creates isolated queues for micro‑frontends or separate notification zones. The core is SSR‑safe: toasts fired on the server are buffered and replayed after ToastContainer mounts.