---
title: Sonner
description: An opinionated toast component for React.
base: base
component: true
links:
doc: https://sonner.emilkowal.ski
---
## About
Sonner is built and maintained by [emilkowalski](https://twitter.com/emilkowalski).
## Installation
Command
Manual
Run the following command:
```bash
npx shadcn@latest add sonner
```
Add the Toaster component
```tsx title="app/layout.tsx" {1,9} showLineNumbers
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Install the following dependencies:
```bash
npm install sonner next-themes
```
Copy and paste the following code into your project.
Add the Toaster component
```tsx showLineNumbers title="app/layout.tsx" {1,8}
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.")
```
## Examples
### Types
### Description
### Position
Use the `position` prop to change the position of the toast.
## API Reference
See the [Sonner API Reference](https://sonner.emilkowal.ski/getting-started) for more information.