docs / core / toaster
Toaster
the place toasts land. it is the half of the toast system you mount rather than call: one of these at the root, and notify works from anywhere, including outside React.
intensity · recedesrsc · client
provenance
shaped from sisu-pluslayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
once, at the root of the app, beside the theme providerit portals to a fixed viewport, so where you put it does not affect where toasts appearnever two of them. the second viewport competes for the same toastsnot per route or per dialog. mounting it late means early toasts are losta11y
the viewport is a live region, so a toast is announced without stealing focus · each toast keeps its own close buttonjest-axedependencies
Base UI toastlive demo · try it out
customize
limithow many stack before the oldest goes
timeoutms before one dismisses itself
usage
import { Toaster } from "@usva-ui/react/primitives/toast";
// once, at the root of the app
<Toaster />props
| prop | type | default | notes |
|---|---|---|---|
| limit | number | — | how many toasts stack before the oldest is dropped. |
| timeout | number | — | milliseconds a toast waits before dismissing itself. |
get it
bun add @usva-ui/reactusage
import { Toaster, notify } from "@usva-ui/react/primitives/toast";
// once, at the root
<Toaster />
// anywhere at all
notify.success("saved", { description: "your sky is safe." });