---
title: Sonner
description: An opinionated toast component for React.
component: true
links:
  doc: https://sonner.emilkowal.ski
source:
  shadcn: true
---

<ComponentPreview name="sonner-demo" peekCode wide />

## About

Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowalski_).

## Installation

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install sonner next-themes
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="sonner" />

<Step>Add the Toaster component</Step>

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

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

</Steps>

## Usage

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

```tsx
toast('Event has been created.')
```

## When to use

Use a toast for short-lived, non-blocking feedback or to confirm an operation
after its originating surface has closed or navigated away.

Do not use a toast as the only feedback for:

- Field validation. Use `FormMessage` or `FieldError` beside the field.
- A failed submission that leaves the form or interstitial visible. Show a
  `role="alert"` message in destructive text near the actions.
- A blocking or materially changed page state. Use an inline state component
  such as `Admonition` or `ErrorDisplay`.

Keep error copy specific and include the next step when it is not obvious.

## Expand

You can change the amount of toasts visible through the visibleToasts prop.

```tsx
<Toaster expand={true | false} />
```

You can use the Input below to try it out.

<SonnerExpandConfig />

## Position

You can change the amount of toasts visible through the visibleToasts prop.

```tsx
<Toaster
  position={
    'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
  }
/>
```

You can use the Input below to try it out.

<SonnerPositionConfig />

## Types

You can customize the type of toast you want to render, and pass an options object as the second argument.

<ComponentPreview name="sonner-types" />

## Upload example

<ComponentPreview name="sonner-upload" />