All components
Available nowReact

Toast stack

Stackable feedback with live announcements and graceful exits.

shadcnRegistry install command
npx shadcn add http://localhost:3000/r/menace-toast-stack.json

Preview

Live component behavior

Interactive
Preview size
desktop
Notification lab

Feedback that lands.

Trigger a state, hover to pause it, or drag the toast sideways to dismiss.

Ready for a notification

Use it in context.

Copy the component into your project, then adapt the source to the interface around it.

TSXUsage example
import { ToastProvider, useToast } from "@/components/menace-toast-stack";

function SaveButton() {
  const { toast } = useToast();
  return <button onClick={() => toast({ title: "Changes saved", tone: "success" })}>Save</button>;
}

<ToastProvider><SaveButton /></ToastProvider>

API and behavior

duration4800
Default auto-dismiss delay in milliseconds; zero keeps toasts open.
maxVisible4
Maximum visible records retained in the queue.
placementbottom-right
Viewport edge and alignment for the toast stack.
renderViewporttrue
Disable when rendering a custom controlled ToastStack.
  • Provides queue, update, dismiss, dismiss-all, controlled-stack, and action APIs.
  • Timers pause on hover and focus, while swipe gestures dismiss without blocking buttons.
  • Six placements and four tones share accessible live announcements and labeled controls.