Build a React Toast Stack with Accessible Announcements

npx shadcn add https://menaceui.com/r/menace-toast-stack.json

Add ToastProvider around the smallest client subtree that needs to create notifications. A root-level provider is useful when unrelated routes share one queue, but it also keeps that client code mounted for every route.

Components call useToast to create, update, dismiss, or clear notifications. The hook throws outside the provider, so a missing boundary fails visibly instead of dropping feedback.

Informational, success, and warning toasts use polite announcements. Error toasts use an alert role and assertive announcement while present. Use the error tone only when the user needs the interruption; validation tied to a field usually belongs beside that field.

• Write a short title that identifies the outcome.
• Use the description for the next useful detail, not repeated text.
• Keep action labels specific, such as “Undo archive”.
• Do not make a toast the only record of a durable status change.

The provider keeps at most four visible toasts by default and starts each timed toast with a 4.8 second duration. Set a duration of zero for a persistent item. Pointer hover and focus within the toast pause its remaining time so an action does not disappear during use.

An action dismisses its toast after running unless dismissOnClick is false. Treat action callbacks as UI triggers. Show durable loading or error state elsewhere when the action starts backend work; the component does not provide delivery, retry, or persistence.

The viewport is a labelled region. Each present toast is atomic and receives a status or alert role. The dismiss button includes the toast title in its accessible name. Keep those relationships when changing visual markup.

Reduced motion disables drag dismissal, layout animation, and spring movement. Entry and exit become opacity changes with zero-duration transitions. Test keyboard dismissal because the swipe gesture is intentionally unavailable in that mode.

• Create several notifications and confirm queue order and limit.
• Pause a timer with pointer hover and with keyboard focus.
• Update and dismiss a toast by its returned ID.
• Listen to polite and assertive announcements with a screen reader.
• Enable reduced motion and verify action and dismiss controls.

Use the live component pageto inspect the current API before adapting the source.