Toast

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/toast.json

npx shadcn@latest add https://prototyper-ui.com/r/toast.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/toast.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/toast.json

This will add the following files to your project:

components/ui/toast.tsx

Setup

Wrap your application with ToastProvider in your root layout:

import { ToastProvider } from "@/components/ui/toast"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ToastProvider>{children}</ToastProvider>
      </body>
    </html>
  )
}

Usage

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

// Basic toast
toast("Event has been created")

// With description
toast("Event has been created", {
  description: "Sunday, December 03, 2024 at 9:00 AM",
})

// Typed variants
toast.success("Action completed successfully")
toast.error("Something went wrong")
toast.warning("Please review before continuing")
toast.info("A new update is available")

Anatomy

<ToastProvider>
  {/* Your app content */}
  {/* Toaster is rendered automatically inside ToastProvider */}
</ToastProvider>

The toast system consists of three layers:

Export	`data-slot`	Purpose	Required
`ToastProvider`	—	Root provider that wraps your app, renders `Toaster` automatically	Yes
`Toaster`	`toaster`	Viewport that positions and renders all active toasts	Auto
`toast`	—	Imperative API to create toasts from anywhere	Yes

Each individual toast renders the following structure:

Part	`data-slot`	Purpose
`Toast.Root`	`toast`	Container for a single toast notification
Icon	`toast-icon`	Type-specific icon (success, error, etc.)
Content wrapper	`toast-content`	Flex container for title and description
`Toast.Title`	`toast-title`	Bold title text
`Toast.Description`	`toast-description`	Secondary description text
`Toast.Action`	`toast-action`	Optional action button
`Toast.Close`	`toast-close`	Dismiss button

Examples

Variants

With Action

Promise

Styling

Data Slots

Use data-slot attributes to target specific parts of the toast:

Slot name	Element
`toaster`	The viewport container for all toasts
`toast`	Individual toast root
`toast-icon`	Type-specific icon
`toast-content`	Content wrapper (title + description)
`toast-title`	Title text
`toast-description`	Description text
`toast-action`	Action button
`toast-close`	Dismiss button

Customization Examples

/* Change toast position to top-center */
[data-slot="toaster"] {
  @apply bottom-auto top-4 right-auto left-1/2 -translate-x-1/2;
}

/* Wider toasts */
[data-slot="toaster"] {
  @apply w-[420px];
}

/* Custom success icon color */
[data-slot="toast-icon"] {
  @apply text-foreground;
}

{/* Custom duration */}
toast("Quick notification", { duration: 2000 })

{/* With action button */}
toast("Item deleted", {
  action: {
    label: "Undo",
    onClick: () => console.log("Undo clicked"),
  },
})

API Reference

ToastProvider

Root provider that wraps your application. Renders the Toaster viewport automatically.

Prop

Type

toast(title, options?)

Imperative function to create a toast notification. Can be called from anywhere in your app.

Prop

Type

toast.success / toast.error / toast.warning / toast.info

Typed variants that display a corresponding icon. Accept the same (title, options?) signature as toast().

Method	Icon	Color
`toast.success`	`CircleCheckIcon`	Emerald 500
`toast.error`	`OctagonXIcon`	Red 500
`toast.warning`	`TriangleAlertIcon`	Amber 500
`toast.info`	`InfoIcon`	Blue 500

toast.promise(promise, options)

Tracks a promise and shows loading, success, and error states.

Prop

Type

Toaster

The viewport component that renders all active toasts. Rendered automatically by ToastProvider.

Prop

Type

All Base UI Toast Viewport props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`Escape`	Dismisses all active toasts

ARIA Attributes

Each toast is rendered as an ARIA live region via Base UI's Toast.Root.
Toast.Title is used as the accessible label for the toast.
Toast.Description provides additional context.
Toast.Close includes aria-label="Dismiss" for screen readers.
Toasts support swipe-to-dismiss gestures on touch devices.
Motion is reduced when the user has prefers-reduced-motion enabled.

New toasts are announced automatically via ARIA live regions.
The Toast.Action button is focusable and announced with its label.
The close button announces "Dismiss" to assistive technology.

On this page