# Sonner

An opinionated toast component for React.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



Basic usage of the Sonner component.



<ComponentPreview name="sonner-demo">
  <SonnerDemo />
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/sonner.json"
```

## Usage [#usage]

```tsx
import { Toaster } from "@/components/ui/sonner"
```

Add the Toaster component to your root layout:

```tsx title="app/layout.tsx"
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}
```

Then you can use the `toast` function anywhere in your app:

```tsx
import { toast } from "sonner"

toast("Event has been created")
```

## Examples [#examples]

### Variants [#variants]

Sonner provides several built-in toast variants like success, error, warning, and info.

<ComponentPreview name="sonner-variants">
  <SonnerVariants />
</ComponentPreview>

### Action [#action]

Render a button in the toast to provide an action for the user.

<ComponentPreview name="sonner-action">
  <SonnerAction />
</ComponentPreview>

### Promise [#promise]

Render a toast that updates based on the state of a promise.

<ComponentPreview name="sonner-promise">
  <SonnerPromise />
</ComponentPreview>

### Position [#position]

You can change the position of the toast by passing the `position` prop.

<ComponentPreview name="sonner-position">
  <SonnerPosition />
</ComponentPreview>

## API Reference [#api-reference]

The `Toaster` component is built on top of [Sonner](https://sonner.emilkowal.ski/).

| Prop       | Type                            | Default          | Description                                                                                                         |
| ---------- | ------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| `position` | `string`                        | `"bottom-right"` | The position of the toasts (`top-left`, `top-right`, `bottom-left`, `bottom-right`, `top-center`, `bottom-center`). |
| `expand`   | `boolean`                       | `false`          | Whether toasts should be expanded by default.                                                                       |
| `duration` | `number`                        | `4000`           | The duration in milliseconds before the toast auto-closes.                                                          |
| `theme`    | `"light" \| "dark" \| "system"` | -                | The theme of the toasts. Usually tied to `next-themes`.                                                             |