Toast

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/toast.json

Usage

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

const toaster = useToast();
 
// add the toaster to the layout
<Toaster toaster={toaster} />
 
// show a toast
toaster.create({
  title: "Show Info Toast",
  description: "This is an info toast",
  type: "info",
});

Deduplication

Toasts with the same id are deduplicated: repeated triggers animate the existing toast.

• Passing id — deduplicate
• Not passing id — always create a new toast

toast.success({ 
  id: "clipboard", 
  title: "Success!",
  description: "User has been created.",
});

Placement

By default, the toaster is placed at the bottom right corner of the screen.

Update the placement option in createToaster() to customize the toaster position.

const baseToaster = createToaster({
  placement: "bottom-end",
  overlap: true,
  max: 4,
});

Max toasts

Any extra toasts will be queued and rendered when a toast has been dismissed.

By default, the toaster displays up to 3 toasts. Update the max option in createToaster() to change the maximum number of visible toasts.

const baseToaster = createToaster({
  placement: "bottom-end",
  overlap: true,
  max: 4,
});

Examples

Variants

Use success, error, warning, and info for the matching icon and accent color.

You can also pass type on toast.create.

Promise

Action

Duration

Control how long a toast stays visible with the duration option.

Use Infinity to keep the toast visible until the user dismisses it.

Closable

Use closable: true to show the close button.

API Reference

Toaster

Toast container. Place once in your app layout (e.g. root layout).

ToastItem

Single toast instance. Used internally by Toaster for each toast.

For a complete list of props, see the Ark UI documentation.