Toast Stack

NewPro

Stacked toasts that fan out on hover, count down, and swipe away.

Workspace settings

Hover the stack to fan it out and pause the timers. Swipe a toast sideways to dismiss it.

Customize

Position

Duration4s

Always expanded

Installation

Toast Stack is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy toast-stack.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { ToastStack, useToastStack } from "@/components/ui/toast-stack";

export function App() {
  const { toasts, push, update, dismiss } = useToastStack();

  async function save() {
    const id = push({ type: "loading", title: "Saving changes" });
    await saveSettings();
    update(id, { type: "success", title: "Changes saved" });
  }

  return (
    <>
      <button onClick={save}>Save</button>
      <ToastStack toasts={toasts} onDismiss={dismiss} position="bottom-right" />
    </>
  );
}

Props

10 properties

Property	Type	Default	Description
toasts	ToastItem[]	—	Toasts to show, newest first: { id, title, description?, type?, duration? }.
onDismiss	(id: string) => void	—	Called when a toast times out, is swiped away or closed.
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Corner or edge the stack grows from.
duration	number	4000	Auto-dismiss delay in ms. Paused while the stack is hovered or focused. Infinity turns it off.
visibleCount	number	3	Toasts visible at once. Older ones wait behind.
expand	boolean	false	Keep the stack fanned out instead of only on hover and focus.
contained	boolean	false	Position inside the nearest positioned ancestor instead of the viewport.
label	string	"Notifications"	Accessible name of the region.
className	string	—	Extra classes for the region.
useToastStack()	() => { toasts, push, update, dismiss }	—	Small state hook. push returns the new id; update turns a loading toast into a result.

Dependencies: motion

Usage

import { ToastStack, useToastStack } from "@/components/ui/toast-stack";

export function App() {
  const { toasts, push, update, dismiss } = useToastStack();

  async function save() {
    const id = push({ type: "loading", title: "Saving changes" });
    await saveSettings();
    update(id, { type: "success", title: "Changes saved" });
  }

  return (
    <>
      <button onClick={save}>Save</button>
      <ToastStack toasts={toasts} onDismiss={dismiss} position="bottom-right" />
    </>
  );
}

Property

Type

Default

Description

toasts

ToastItem[]

—

Toasts to show, newest first: { id, title, description?, type?, duration? }.

onDismiss

(id: string) => void

—

Called when a toast times out, is swiped away or closed.

position

"bottom-right"

Corner or edge the stack grows from.

duration

number

4000

Auto-dismiss delay in ms. Paused while the stack is hovered or focused. Infinity turns it off.

visibleCount

number

Toasts visible at once. Older ones wait behind.

expand

boolean

false

Keep the stack fanned out instead of only on hover and focus.

contained

boolean

false

Position inside the nearest positioned ancestor instead of the viewport.

label

string

"Notifications"

Accessible name of the region.

className

string

—

Extra classes for the region.

useToastStack()

() => { toasts, push, update, dismiss }

—

Small state hook. push returns the new id; update turns a loading toast into a result.