---
title: Toast
description: A succinct message that is displayed temporarily.
component: true
radix:
  link: https://www.radix-ui.com/docs/primitives/components/toast
  api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference
---

<ComponentPreview name="toast-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

<Steps>

<Step>Run the following command:</Step>

```bash
npx shadcn-ui@latest add toast
```

<Step>Add the Toaster component</Step>

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

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

</Steps>

</TabsContent>

<TabsContent value="manual">

<Steps>

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

```bash
npm install @radix-ui/react-toast
```

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

`toast.tsx`

<ComponentSource name="toast" />

`toaster.tsx`

<ComponentSource name="toast" fileName="toaster" />

`use-toast.tsx`

<ComponentSource name="toast" fileName="use-toast" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the Toaster component</Step>

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

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

</Steps>

</TabsContent>

</Tabs>

## 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 (
    <Button
      onClick={() => {
        toast({
          title: "Scheduled: Catch up",
          description: "Friday, February 10, 2023 at 5:57 PM",
        })
      }}
    >
      Show Toast
    </Button>
  )
}
```

<Callout>

To display multiple toasts at the same time, you can update the `TOAST_LIMIT` in `use-toast.tsx`.

</Callout>

## Examples

### Simple

<ComponentPreview name="toast-simple" />

### With title

<ComponentPreview name="toast-with-title" />

### With Action

<ComponentPreview name="toast-with-action" />

### Destructive

Use `toast({ variant: "destructive" })` to display a destructive toast.

<ComponentPreview name="toast-destructive" />
