Toast

A notification system built on Base UI’s Toast primitive. Toasts slide in from the bottom-right corner and auto-dismiss. The useToast hook triggers them from anywhere within the provider.

Import


import { Toast } from "chunks-ui";

Setup

Wrap your app (or the relevant subtree) with Toast.Provider and place Toast.Viewport where the toasts should render:


export default function RootLayout({ children }) {
  return (
    <Toast.Provider>
      {children}
      <Toast.Viewport />
    </Toast.Provider>
  );
}

Basic Usage

Use Toast.useToast() to get the add function and trigger notifications:


function SaveButton() {
  const { add } = Toast.useToast();
 
  return (
    <button onClick={() => add({ title: "Saved", description: "Your changes have been saved." })}>
      Save
    </button>
  );
}

Multiple Toasts

Multiple toasts stack in the viewport. Each call to add creates an independent toast:

With Action

Pass actionProps to render a labelled action button inside the toast:


const { add } = Toast.useToast();
 
add({
  title: "Message deleted",
  description: "The message has been removed from your inbox.",
  actionProps: {
    children: "Undo",
    onClick: () => restoreMessage(),
  },
});

Compound Parts

Part	Description
`Toast.Provider`	Context provider. Must wrap any component that calls `useToast`.
`Toast.Viewport`	Fixed-position container that renders all active toasts.
`Toast.Root`	Individual toast wrapper with slide/fade enter/exit transitions.
`Toast.Title`	Bold toast heading.
`Toast.Description`	Supporting text in `text-muted-foreground`.
`Toast.Close`	Icon button that dismisses the toast.
`Toast.Action`	Optional action button rendered inside the toast.
`Toast.useToast`	Hook that returns `{ add, toasts }` for the nearest provider.

Toast.useToast — `add` Options

Option	Type	Description
`title`	`string`	Toast heading text
`description`	`string`	Supporting body text
`actionProps`	`{ children: ReactNode; onClick: () => void }`	Props for the action button
`timeout`	`number`	Auto-dismiss delay in milliseconds (provider default applies if omitted)

Toast.Provider Props

Prop	Type	Default	Description
`timeout`	`number`	`5000`	Default auto-dismiss delay in ms
`limit`	`number`	—	Maximum number of toasts shown simultaneously

Toast.Viewport Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes on the viewport container