Hi 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: TheToastDemocomponent 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!
SOCIAL SHARE CARD GENERATOR