Toast

A toast displays a brief, temporary notification.

On this page

Installation

npm

pnpm

yarn

bun

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',
})

Examples

No examples yet.

API Reference

Options for a toast, passed to the toast manager when adding it to the queue. These include the toast's title, description, type, timeout, and custom data.

Prop	Type	Default
	`Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">`	`—`
	`ToastData`	`—`
	`ToastManagerPositionerProps`	`—`
	`"high" \| "low"`	`'low'`
	`number`	`5000`
	`ReactNode`	`—`
	`"ending" \| "starting"`	`—`
	`string`	`—`

Last updated on 6/16/2026