---
title: Toast
description: A succinct message that is displayed temporarily.
component: true
links:
doc: https://www.radix-ui.com/docs/primitives/components/toast
api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference
---
## Installation
CLIManualRun the following command:
```bash
npx shadcn-ui@latest add toast
```
Add the Toaster component
```tsx title="app/layout.tsx" {1,9}
import { Toaster } from "@/components/ui/toaster"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Install the following dependencies:
```bash
npm install @radix-ui/react-toast
```
Copy and paste the following code into your project.
`toast.tsx`
`toaster.tsx`
`use-toast.tsx`
Update the import paths to match your project setup.Add the Toaster component
```tsx title="app/layout.tsx" {1,9}
import { Toaster } from "@/components/ui/toaster"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Usage
The `useToast` hook returns a `toast` function that you can use to display a toast.
```tsx
import { useToast } from "@/components/ui/use-toast"
```
```tsx {2,7-10}
export const ToastDemo = () => {
const { toast } = useToast()
return (
)
}
```
To display multiple toasts at the same time, you can update the `TOAST_LIMIT` in `use-toast.tsx`.
## Examples
### Simple
### With title
### With Action
### Destructive
Use `toast({ variant: "destructive" })` to display a destructive toast.