# Sonner

An opinionated toast component for React.

## When to use

* Confirm an action or report an event with a short message that disappears on its own: "Saved", "Event created".
* Add an action, such as Undo, when the user may want to reverse what happened.

## How it works

`Toaster` renders the toast region from the `sonner` library, styled with the shadcn tokens and following the theme from `next-themes`. Mount it once, then call `toast()` from `sonner` anywhere. The code is the same for both libraries. For Base UI the official docs now point to the `Toast` component (https://ui.shadcn.com/docs/components/base/toast); this page keeps Sonner, which the `base-nova` registry still ships.

## Example

### Base UI

```tsx
'use client'

import { toast } from "sonner"

import { Button } from "@/shadcn/base/ui/button"
import { Toaster } from "@/shadcn/base/ui/sonner"

export default function SonnerDemo() {
  return (
    <>
    <Button
      variant="outline"
      onClick={() =>
        toast("Event has been created", {
          description: "Sunday, December 03, 2023 at 9:00 AM",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Show Toast
    </Button>
    {/* The official docs mount <Toaster /> once in the root layout; the demo mounts it here. */}
    <Toaster />
    </>
  )
}
```

```tsx [components/ui/sonner.tsx]
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      icons={{
        success: (
          <CircleCheckIcon className="size-4" />
        ),
        info: (
          <InfoIcon className="size-4" />
        ),
        warning: (
          <TriangleAlertIcon className="size-4" />
        ),
        error: (
          <OctagonXIcon className="size-4" />
        ),
        loading: (
          <Loader2Icon className="size-4 animate-spin" />
        ),
      }}
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
          "--border-radius": "var(--radius)",
        } as React.CSSProperties
      }
      toastOptions={{
        classNames: {
          toast: "cn-toast",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
```

### Radix

```tsx
'use client'

import { toast } from "sonner"

import { Button } from "@/shadcn/radix/ui/button"
import { Toaster } from "@/shadcn/radix/ui/sonner"

export default function SonnerDemo() {
  return (
    <>
    <Button
      variant="outline"
      onClick={() =>
        toast("Event has been created", {
          description: "Sunday, December 03, 2023 at 9:00 AM",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Show Toast
    </Button>
    {/* The official docs mount <Toaster /> once in the root layout; the demo mounts it here. */}
    <Toaster />
    </>
  )
}
```

```tsx [components/ui/sonner.tsx]
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      icons={{
        success: (
          <CircleCheckIcon className="size-4" />
        ),
        info: (
          <InfoIcon className="size-4" />
        ),
        warning: (
          <TriangleAlertIcon className="size-4" />
        ),
        error: (
          <OctagonXIcon className="size-4" />
        ),
        loading: (
          <Loader2Icon className="size-4 animate-spin" />
        ),
      }}
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
          "--border-radius": "var(--radius)",
        } as React.CSSProperties
      }
      toastOptions={{
        classNames: {
          toast: "cn-toast",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
```

## Installation

```bash
npx shadcn@latest add sonner
```

## Reference

Official page: https://ui.shadcn.com/docs/components/sonner