Toast

Installation

npx shadcn@latest add @dotui/toast

Usage

import { ToastProvider, toastManager } from '@/components/ui/toast'

;<ToastProvider />

toastManager.add({
  title: 'Your message has been sent.',
})

toastManager.add({
  title: 'Changes saved',
  description: 'Your update is live.',
  type: 'success',
})

Imperative API

Toasts aren't rendered as JSX. Mount <ToastProvider /> once at your app root, then push notifications imperatively with toastManager. add returns an id you can pass to close.

import { ToastProvider, toastManager } from '@/components/ui/toast'
;<ToastProvider />

const id = toastManager.add({ title: 'Your message has been sent.' })
toastManager.close(id)

Variants

Pass type to add to select a semantic variant, each with its own icon and color. Values are neutral, success, error, danger, warning, info, and loading. neutral renders no icon.

toastManager.add({
  title: 'Changes saved',
  description: 'Your update is live.',
  type: 'success',
})

Actions

Pass actionProps to render an action button inside the toast, typically to undo the operation and close the current toast by id.

const id = toastManager.add({
  title: 'Message archived',
  type: 'info',
  actionProps: {
    children: 'Undo',
    onClick: () => toastManager.close(id),
  },
})

Promise

Use toastManager.promise to drive loading, success, and error states from a promise. Each key takes the same options as add.

toastManager.promise(publish(), {
  loading: { title: 'Publishing changes', type: 'loading' },
  success: { title: 'Published', type: 'success' },
  error: { title: 'Publish failed', type: 'error' },
})

Placement

The position prop on ToastProvider sets the viewport corner and derives the swipe-to-dismiss direction. Values are top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right; it defaults to bottom-right.

<ToastProvider position="top-center" />

Provider options

ToastProvider caps visible toasts with limit (default 3) and sets the auto-dismiss duration in milliseconds with timeout (default 5000).

<ToastProvider limit={5} timeout={8000} />

Examples

API Reference