# Toaster (goodtabs UI)

Sonner set up for the goodtabs look: bottom right, monochrome, with lucide icons.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/toaster.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/toaster`

## Usage

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

// once, in your root layout
<Toaster />

// anywhere
toast.success("Saved")
toast.promise(save(), { loading: "Saving", success: "Saved", error: "Could not save" })
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| position | `ToasterProps["position"]` | `"bottom-right"` | Where toasts stack. Any Sonner position. |
| ...props | `ToasterProps` |  | Every other Sonner Toaster prop passes through and overrides the defaults. |

## When to use

- Confirming that a quick action worked: saved, copied, sent
- Reporting a background task that finished or failed
- Offering undo right after a reversible action

## When not to use

- Errors the person must deal with before moving on: use an inline message or a dialog
- Anything that needs to stay on screen: toasts go away on their own

## Notes for agents

- Mount Toaster once, in the root layout, then import toast from the same file anywhere
- It reads the theme from the dark class on the html element, so it works with next-themes or any class based toggle without importing either
- richColors is off on purpose: every toast type is monochrome and the icon carries the meaning
- Pass position or any other Sonner prop to override the defaults for one mount

Docs: https://ui.goodtabs.co/components/toaster