Toast seems not work for me

[ChanryLimmy]

I create a totally new page in Nextjs project with the demo toast code.

// src/app/test/page.tsx
"use client"

import { Button } from "@/components/ui/button"
import { ToastAction } from "@/components/ui/toast"
import { useToast } from "@/components/ui/use-toast"

export default function ToastDemo() {
  const { toast } = useToast()

  return (
    <Button
      variant="outline"
      onClick={() => {
        console.log("clicked")
        toast({
          title: "Scheduled: Catch up ",
          description: "Friday, February 10, 2023 at 5:57 PM",
          action: (
            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
          ),
        })
      }}
    >
      Add to calendar
    </Button>
  )
}

run project and then visit http://localhost:3000/test, a white button on the left-top. Click it, console shows "clicked", and nothing happens then.

For more info i can provide, list my dependencies blow:

{
"dependencies": {
    "@hookform/resolvers": "^3.3.1",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "crypto-js": "^4.1.1",
    "lucide-react": "^0.284.0",
    "next": "13.5.4",
    "node-cache": "^5.1.2",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.47.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

[TA9IO]

dont forgot to add the <Toaster /> component to your root file.

import { Toaster } from "@/components/ui/toaster"
<Toaster />

[ChanryLimmy]

oh! fine. i forgot it, thx bro!

[Chipzstar]

Currently, shadcn Toast component is called "Toast" no longer "Toaster". Also adding the Toast component alone is not enough. It now needs to be wrapped within a . I've done the above and warpped the Toast in the ToastProvider but still not getting the Toast to display :/

[TheMikeyRoss]

I have the same issue as you @Chipzstar

[Chipzstar]

Turns out there is a Toaster component (apologies). If you delete the existing toast / use-toast components and then reinstall with the CLI, the toaster component should get added.