Toast stack

Notifications stacked in the middle of the container. Hover to fan them open, swipe one left or right to dismiss it, and add new ones from the pills below.

Feedback, drag, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/toast-stack.tsx https://motion-brew.com/r/toast-stack.tsx

One self contained file for React and Tailwind CSS: toast-stack.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { useRef } from "react";
import { ToastStack, type ToastStackHandle } from "@/components/toast-stack";

export default function Workspace() {
  const toasts = useRef<ToastStackHandle>(null);
  const save = async () => {
    await saveSettings();
    toasts.current?.push({
      kind: "success",
      title: "Changes saved",
      description: "Your workspace settings are live.",
    });
  };
  return (
    <div className="grid place-items-center">
      <ToastStack ref={toasts} initial={[]} triggers={false} />
      <button onClick={save}>Save</button>
    </div>
  );
}

Props

Prop	Type	Default	Description
initial	ToastItem[]	three samples	Toasts shown at the start, oldest first; they stay
duration	number	6000	Default time on screen in ms; 0 keeps toasts
visible	number	3	Toasts the folded stack shows
triggers	boolean	true	Row of sample buttons under the stack
onDismiss	(toast) => void		Called when a toast leaves
className	string		Placement

More feedback

Privacy banner: A cookie consent card.

All animated react toasts and banners