018
Toast
FeedbackNone shown
Customize
Tone
Duration
Code
// once, in your root layout
<Toaster />
// anywhere
toast({
title: "Heads up",
description: "Registry rebuilt.",
});Install
npx shadcn@latest add https://components.haedong.dev/r/toast.json
Props
Render <Toaster /> once (this site does it in the root layout), then call toast() from anywhere; it returns an id for toast.dismiss(id). Toaster also takes position.
| Prop | Type | Description |
|---|---|---|
| toast.title | string | Required. |
| toast.description | string | Muted second line. |
| toast.tone | "info" | "success" | "warning" | "error" | Same prefixes and role as Alert. Defaults to "info". |
| toast.duration | number | ms until auto-dismiss. Infinity keeps it until closed. Defaults to 5000. |
| Toaster.position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | Corner of the stack. Defaults to "bottom-right". |