Toast

Overlay

A brief, dismissible notification that appears over the UI.

Toasts surface non-blocking feedback. The Toaster renders the provider and viewport; call useToast() anywhere inside it to add toasts.

npx shadcn@latest add toast

Adding toasts

Buttons must live inside <Toaster /> so they can access the toast manager context.

Preview

Live

tsx

1const toast = useToast()
2
3<Toaster>
4  <Button
5    onClick={() =>
6      toast.add({
7        title: "Changes saved",
8        description: "Your profile has been updated.",
9      })
10    }
11  >
12    Show toast
13  </Button>
14</Toaster>

Dismissal

Toasts auto-dismiss after a timeout and can be closed manually.

Preview

Live

tsx

1toast.add({
2  title: "Deployment failed",
3  description: "Check the build logs for details.",
4  timeout: 8000,
5})

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
title	ReactNode	The toast title.
description	ReactNode	Secondary text shown under the title.
timeout	number= 5000	Auto-dismiss delay in ms. 0 keeps it open.
priority	"low" \| "high"= "low"	Screen-reader announcement priority.
type	string	Optional type used for conditional styling.