Toast

A succinct message that is displayed temporarily.

shadcn/ui docs

Installation

The component depends on the Button component. Add it first.

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/toast.json

Usage

Render <Toaster /> once in your root layout.

import { Toaster } from '@/components/ui/toast'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Then call toast.add from anywhere, even outside React components.

import { toast } from '@/components/ui/toast'
toast.add({
  title: 'Event created',
  description: 'Sunday, December 3 at 9:00 AM',
})

Set type to success, info, warning, error or loading to show an icon, pass actionProps to render an action button, or use toast.promise to track an async task.

toast.add({
  type: 'success',
  title: 'Changes saved',
  actionProps: {
    children: 'Undo',
    onClick: () => undo(),
  },
})
 
toast.promise(saveChanges(), {
  loading: { title: 'Saving...' },
  success: { title: 'Saved' },
  error: { title: 'Could not save' },
})

This component replaces sonner. It is built on the Base UI toast primitive, so no extra dependency is needed.

Examples

Each example below renders its own <Toaster> and reads the manager it provides with useToastManager, so the previews on this page stay independent of each other. In your app, render <Toaster /> once in the root layout and call toast.add from anywhere.

Default

Types

Set the type option to render a status icon. The built-in renderer recognizes success, info, warning, error, and loading.

Action

Pass button props with actionProps to render an action.

Promise

Use toast.promise to update one toast as an asynchronous task moves through loading, success, and error states.