Toast

A temporary notification that appears on screen to inform users.

API Reference

Preview

Installation

Add the StackedToastProvider and AnchoredToastProvider to your app.

app/layout.tsx
import { AnchoredToastProvider, StackedToastProvider } from "@/components/ui/toast"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <StackedToastProvider>
          <AnchoredToastProvider>
            <main>{children}</main>
          </AnchoredToastProvider>
        </StackedToastProvider>
      </body>
    </html>
  )
}

Usage

Stacked Toasts

import { stackedToast } from "@/components/ui/toast"
stackedToast.default({
  title: "Event has been created",
  description: "Monday, January 3rd at 6:00pm",
})

By default, toasts appear in the bottom-right corner. You can change this by setting the position prop on the StackedToastProvider.

Allowed values: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.

<StackedToastProvider position="top-center">{children}</StackedToastProvider>

Anchored Toasts

For toasts positioned relative to a specific element, use anchoredToast. The AnchoredToastProvider is typically added to your app layout alongside StackedToastProvider.

import { anchoredToast } from "@/components/ui/toast"
anchoredToast.success({
  title: "Copied!",
  positionerProps: {
    anchor: buttonRef.current,
  },
})

API Reference

StackedToastProvider

Provider component for stacked toasts. Wraps Toast.Provider from Base UI.

AnchoredToastProvider

Provider component for toasts anchored to specific elements. Use with anchoredToast.

stackedToast

Manager object for creating stacked toasts.

anchoredToast

Manager object for creating anchored toasts. Same API as stackedToast, with positionerProps.anchor to attach to an element.

Examples

With Status

Loading

With Action

Anchored