Ermias TeklemarkosHi everyone,
I'm currently working on an Astro project and attempting to implement toast notifications using use-toast and Toaster. Despite following the documentation and various troubleshooting steps, I'm unable to get the toast notifications to work. I would greatly appreciate any insights or suggestions from the community.
Project Setup
1. layout.astro
---
import NavBar from "@/components/navbar";
import { Toaster } from "@/components/ui/toaster";
---
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<NavBar />
<slot /> <!-- your content is injected here -->
<Toaster />
</body>
</html>
2. index.astro
---
import { ToastDemo } from "@/components/ToastDemo";
import Layout from "../layouts/Layout.astro";
---
<Layout>
<main class="flex justify-center">
<ToastDemo client:idle />
</main>
</Layout>
3. ToastDemo.tsx
"use client"
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
export function ToastDemo() {
const { toast } = useToast();
return (
<Button
variant="outline"
onClick={() => {
console.log("ToastDemo");
toast({
description: "Your message has been sent.",
});
}}
>
Show Toast
</Button>
);
}
Tailwind CSS Configuration
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
};
Issues Faced
-
Toast Not Displaying: The
ToastDemocomponent logs "ToastDemo" in the console, indicating that the click event is triggered, but the toast notification does not appear. - No Errors in Console: There are no error messages or warnings in the browser console.
Steps Taken
- Verified that all necessary dependencies are installed and up to date.
- Checked import paths and ensured they are correct.
- Confirmed Tailwind CSS is configured and working properly.
- Ensured that
<Toaster />is included in the layout component. - Tried both
client:idleandclient:loaddirectives for theToastDemocomponent.
Request
Has anyone experienced similar issues or can point out what might be going wrong? Any help or suggestions would be highly appreciated!
Thank you in advance!
