Toast

Composing it

ToastProvider is one instance, mounted once near the root - the same as SmoothScroll. Every useToast() call anywhere beneath it shares the one role="status" region and the one bottom-right corner; there is no reason to mount a second provider except to give a specific subtree its own duration.

Motion and reduced motion

Each toast animates in with a short slide and fade; under prefers-reduced-motion: reduce that animation is removed and the card simply appears. Nothing about the four-second dismissal timer changes - reduced motion affects how it arrives, not how long it stays.

When not to use it

Strings only, four seconds, one shape - there is no action button, no promise-tracking, no progress state, and no way to keep one on screen past its timer. For a message that needs a "Undo" button or has to persist until someone reads it, ToastToastStrings, four seconds, bottom corner, announced politely - one provider and one hook, nothing else.@sushindustries/ui · content is the wrong tool; build that with DialogDialogA native dialog driven by props: top layer, focus trap and Escape from the element, click-outside from here.@sushindustries/ui · layout or SheetSheetThe dialog docked to an edge, for content tall enough that centring it would mean scrolling a floating box.@sushindustries/ui · layout instead, where dismissal is deliberate rather than timed.