Toast
Notification slabs with a raised tint so stacked toasts never blur each other. Mount the Toaster once; call toast() from anywhere.
Install
$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/toaster.jsonExamples
Default
"use client";
import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toaster";
export function ToasterDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-3">
<Toaster />
<Button
variant="film"
onClick={() =>
toast("Draft saved", { description: "Synced to the workspace." })
}
>
Default
</Button>
<Button
variant="film"
onClick={() => toast.success("Build passing", { description: "47 routes prerendered." })}
>
Success
</Button>
<Button
variant="film"
onClick={() =>
toast.error("Contrast floor reached", {
description: "Tint alpha was clamped.",
action: { label: "Review", onClick: () => {} },
})
}
>
Error
</Button>
</div>
);
}API
<Toaster />
| Prop | Type | Default | Description |
|---|---|---|---|
| position | Position | "bottom-right" | Corner the stack grows from. |
| visibleToasts | number | 3 | Maximum simultaneously visible. |