# Toast

> Toast notifications. Mount Toaster once, then call useToast().add().

Registry name: `toast`. HTML docs: https://ui.anuragroy.dev/component/toast.

## Install

```bash
npx shadcn@latest add https://ui.anuragroy.dev/r/toast.json
```

If the website is down: `npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/toast.json`.

Registry JSON: https://ui.anuragroy.dev/r/toast.json (GitHub: https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/toast.json).

## Import

Import paths follow the consumer `components.json` aliases. After a default install:

```tsx
import {
  ToastProvider,
  Toaster,
  useToast
} from "@/components/ui/toast"
```

## Usage

```tsx
import { Button } from "@/components/ui/button"
import { ToastProvider, Toaster, useToast } from "@/components/ui/toast"

function Trigger() {
  const toast = useToast()
  return (
    <Button
      onClick={() =>
        toast.add({
          title: "Saved",
          description: "Your changes have been applied.",
        })
      }
    >
      Show toast
    </Button>
  )
}

export function Example() {
  return (
    <ToastProvider>
      <Trigger />
      <Toaster />
    </ToastProvider>
  )
}
```

## API

### useToast

Base UI toast manager. Typical call: `toast.add({ title, description })`.

No additional props beyond the underlying primitive.

### Toaster

Renders the viewport and stacked toasts. Mount once near the app root.

No additional props beyond the underlying primitive.

### Toast

Also exported: `ToastViewport`, `ToastList`, `ToastContent`, `ToastTitle`, `ToastDescription`, and `ToastClose` for custom layouts.

No additional props beyond the underlying primitive.

## Notes

- Toasts enter and exit from the same edge so swipe-to-dismiss stays spatial.

## See also

- [HTML page](https://ui.anuragroy.dev/component/toast): Preview and the same docs in the site chrome.
- [Registry item](https://ui.anuragroy.dev/r/toast.json): Source files and dependencies.
- [Catalog](https://ui.anuragroy.dev/component): All components.
- [llms.txt](https://ui.anuragroy.dev/llms.txt): Agent index for this library.