Component

Toast

A small notification system with variants, viewport positions, timed dismissal, and a lightweight hook.

Examples

Live previews paired with copyable source.

Basic Toast

Trigger a short notification from any client component.

tsx

const { toasts, showToast } = useToast()

<Button onClick={() => showToast({ message: 'Profile saved' })}>
  Show toast
</Button>

{toasts.map((toast) => (
  <Toast key={toast.id} {...toast} />
))}

Variants

Use variants to communicate intent and severity.

tsx

showToast({ message: 'Saved successfully', variant: 'success' })
showToast({ message: 'Something went wrong', variant: 'error' })
showToast({ message: 'Check this before continuing', variant: 'warning' })

Position

Place notifications where they best fit your product surface.

tsx

showToast({ message: 'Top right toast', position: 'top-right' })
showToast({ message: 'Bottom center toast', position: 'bottom-center' })

API Reference

Props available on the component.

Prop	Type	Default	Description
message	string	required	Text displayed inside the toast.
variant	'default' \| 'success' \| 'error' \| 'warning' \| 'info'	'default'	Controls color and icon treatment.
position	'top-right' \| 'top-center' \| 'top-left' \| 'bottom-right' \| 'bottom-center' \| 'bottom-left'	'bottom-right'	Places the toast on the viewport.
duration	number	3000	Visible time in milliseconds before dismissal.
onClose	() => void	required	Removes the toast from state.

Install

bash

pnpm dlx pacmanui add toast
npx pacmanui add toast

Basic Usage

tsx

import { Toast, useToast } from '@/components/pacmanui/toast'

export default function Example() {
  const { toasts, showToast } = useToast()
  return toasts.map((toast) => <Toast key={toast.id} {...toast} />)
}