Browse the docs

Toast

Notification queue. Mount <Toaster /> once near the root of the app, then call toast() from anywhere — event handlers, async code, other modules. Items announce politely to screen readers, auto-dismiss after five seconds, and pause their timer while hovered or focused.

This component needs the toast primitive — two ways to get it:

Copy: fetch /r/primitives/toast.txt and save it as primitives/toast.js.
Install: npm install @presetui/ui — the primitives are bundled, no second package — then use the Source · npm tab below, whose import already points at @presetui/ui/primitives/toast.

API

import { Toaster, toast } from "@/components/ui/toast"

// once, near the root
<Toaster />

// anywhere
toast("Changes saved")
toast({ title: "Deploy started", message: "On its way.", duration: 8000 })
toast({ message: "Sticky until dismissed", duration: null })

Payload field	Values	Default	Description
`message`	node	—	Body text. A bare string is shorthand for `{ message }`.
`title`	node	—	Optional bold first line.
`duration`	ms or `null`	`5000`	`null` never auto-dismisses.

Notes

createToaster() from the primitive makes an isolated queue when one global queue isn't enough (e.g. a second viewport inside a preview pane).