Toast
A brief notice that something happened. It leaves on its own.
Notifications appear in the bottom corner. Trigger a few to try the stack.
When to use it
Use Toast to confirm something that already happened and needs no reply, such as “Saved” or “Invite sent.” Add an Undo action when it helps.
Anything people must read or act on belongs on the page, in an Alert.
Alert
Stays on the page.
Warnings and errors about this page.
ToastThis page
Comes and goes.
Confirmations that need no reply.
Empty
Nothing here yet.
Tip: press⌘Nfrom anywhere to start a document.
First runs and empty searches.
How it behaves
Mount one Toaster near your application root, then call toast.add({ title, description }) from client-side event handlers. Avoid calling the shared manager during server rendering.
Use type=success, info, warning, error, or loading for a status icon. The surface stays neutral; errors use a destructive icon. Describe the result in words as well as color.
Pass actionProps for an action, and use the returned id with toast.close(id). Use toast.update or toast.promise to update an existing notification instead of adding duplicates.
Base UI handles announcements, dismissal, hover/focus timeout pausing, swipe gestures, and stack expansion. F6 moves focus into the toast viewport. Provider options such as timeout and limit pass through Toaster.
Stack movement uses a 220ms CSS transition with the shared ease-out curve. Reduced motion uses opacity only, and focused keyboard interaction is immediate. Loading icons stop spinning with reduced motion.
All installed composition parts remain available: ToastProvider, ToastPortal, ToastViewport, Toast, ToastContent, ToastTitle, ToastDescription, ToastAction, and ToastClose, plus createToastManager and useToastManager for a separate scope. Toaster includes close-button tooltips.
Build it
Add it with the shadcn CLI:
1pnpm dlx shadcn@latest add https://jzbui.com/r/toast.jsonA complete example. Change the values to fit your product:
12345678910111213141516171819import { Toaster, toast } from "@/components/ui/toast"import { Button } from "@/components/ui/button"
// Mount once near your application root.export function App() { return <><SaveButton /><Toaster /></>}
function SaveButton() { return ( <Button onClick={() => toast.add({ title: "Changes saved", description: "Your workspace is up to date.", type: "success", })}> Show confirmation </Button> )}The full source is yours to edit once installed: