InteractionFree component
Toast stack
Stacked notifications for success, errors, and updates, with timed dismissal and screen-reader announcements. Keep feedback close to the action.
Preview
Open previewInstallation
Add toast stack to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-toast-stack.jsonUsage
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>Props
Key options and their defaults.
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.