Overlay

Toast

Transient notification stack.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx mcp-elements add toast

Usage

toast-example.tsxTSX

import { Toaster, useToast } from '@mcp-elements/react'

export function Example() {
  const { toast } = useToast()
  return (
    <>
      <button
        onClick={() =>
          toast.success('Tool call complete', 'search_files returned 47 results')
        }
      >
        Run tool
      </button>
      <Toaster position="bottom-right" />
    </>
  )
}

Props

Prop	Type	Default	Description
`position`	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Where the toast stack is anchored on screen
`className`	`string`	—	Additional classes merged onto the toaster container