Toast

A high-quality, styled React toast component to generate notifications using Base UI.

The Toast component displays temporary, non-disruptive notifications in response to user actions or system events.

Usage

Simply wrap your application or component tree in Toast.Provider, and trigger toasts from anywhere using useToastManager().

import { Toast, useToastManager } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

export function ExampleToast() {
  return (
    <Toast.Provider>
      <ToastTrigger />
    </Toast.Provider>
  );
}

function ToastTrigger() {
  const toastManager = useToastManager();

  return (
    <Button
      onClick={() =>
        toastManager.add({
          title: "Event Saved",
          description: "Your changes have been saved successfully.",
        })
      }
    >
      Show Notification
    </Button>
  );
}

Custom Layout

If you want custom control over the toast list and layout, pass defaultViewport={false} to Toast.Provider and render your own Toast.Portal and Toast.Viewport:

import { Toast, useToastManager } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

export function CustomToast() {
  return (
    <Toast.Provider defaultViewport={false}>
      <ToastTrigger />
      <Toast.Portal>
        <Toast.Viewport>
          <ToastList />
        </Toast.Viewport>
      </Toast.Portal>
    </Toast.Provider>
  );
}

function ToastList() {
  const { toasts } = useToastManager();

  return (
    <>
      {toasts.map((toast) => (
        <Toast.Root key={toast.id} toast={toast}>
          <Toast.Content>
            <div>
              <Toast.Title>{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
            </div>
            <Toast.Close />
          </Toast.Content>
        </Toast.Root>
      ))}
    </>
  );
}

Preview

Custom Styling

Customize toast card shadows, background colors, and border accents using className:

<Toast.Content className="border border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 shadow-xl rounded-xl">
  <div>
    <Toast.Title className="font-semibold">Success!</Toast.Title>
    <Toast.Description>Profile updated successfully.</Toast.Description>
  </div>
</Toast.Content>

Styling & Class Names

Target internal toast CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.toast`	Root toast item	Animated toast card container.
`.toast__viewport`	Fixed viewport	Fixed positioning container for stacking toasts.
`.toast__content`	Content wrapper	Layout wrapper for title, description, and actions.
`.toast__title`	Title heading	Bold toast title text.
`.toast__description`	Description text	Muted toast body description.
`.toast__close`	Close button	Dismiss button icon.

Anatomy

<Toast.Provider>
  <Toast.Portal>
    <Toast.Viewport>
      <Toast.Root>
        <Toast.Content>
          <Toast.Title />
          <Toast.Description />
          <Toast.Action />
          <Toast.Close />
        </Toast.Content>
      </Toast.Root>
    </Toast.Viewport>
  </Toast.Portal>
</Toast.Provider>