---
title: Sonner
description: An opinionated toast component for React.
component: true
links:
doc: https://sonner.emilkowal.ski
source:
shadcn: true
---
## About
Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowalski_).
## Installation
Install the following dependencies:
```bash
npm install sonner next-themes
```
Copy and paste the following code into your project.
Add the Toaster component
```tsx title="app/layout.tsx" {1,9}
import { Toaster } from '@/components/ui/sonner'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Usage
```tsx
import { toast } from 'sonner'
```
```tsx
toast('Event has been created.')
```
## Expand
You can change the amount of toasts visible through the visibleToasts prop.
```tsx
```
You can use the Input below to try it out.
## Position
You can change the amount of toasts visible through the visibleToasts prop.
```tsx
```
You can use the Input below to try it out.
## Types
You can customize the type of toast you want to render, and pass an options object as the second argument.
## Upload example