> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
> Use this file to discover all available pages before exploring further.
# Toast
> Display brief, temporary notifications to users.
The toast component has been deprecated. Use the [Sonner](/components/sonner) component instead for toast notifications.
## Migration to Sonner
Sonner is the recommended replacement for the toast component. It provides a better user experience with more features and better animations.
### Installation
```bash npm theme={null}
npx shadcn@latest add sonner
```
```bash yarn theme={null}
yarn dlx shadcn@latest add sonner
```
```bash pnpm theme={null}
pnpm dlx shadcn@latest add sonner
```
```bash bun theme={null}
bunx shadcn@latest add sonner
```
### Setup
Add the Toaster component to your root layout:
```tsx title="app/layout.tsx" theme={null}
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
### Usage
```tsx theme={null}
import { toast } from "sonner"
// Basic toast
toast("Event has been created.")
// Success toast
toast.success("Account created successfully.")
// Error toast
toast.error("Something went wrong.")
// With description
toast("Event has been created.", {
description: "Monday, January 3rd at 6:00pm",
})
```
## Examples
BasicTypesActions
```tsx theme={null}
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
export default function ToastDemo() {
return (
)
}
```
```tsx theme={null}
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
export default function ToastTypes() {
return (
)
}
```
```tsx theme={null}
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
export default function ToastWithAction() {
return (
)
}
```
## Why Sonner?
Sonner provides several advantages over the deprecated toast component:
* Better animations and transitions
* Built-in support for promise-based toasts
* Action buttons and custom components
* Keyboard accessibility
* Position customization
* Expandable toasts
* Built-in theme support
## Learn More
For complete documentation and advanced usage, visit:
* [Sonner Component Documentation](/components/sonner)
* [Official Sonner Documentation](https://sonner.emilkowal.ski)