nextui-org
[BUG] - Toast not expanding on hover
HeroUI Version
2.7.2
Describe the bug
I am using the heroui custom toast component but it does not expand on hover as it does in docs. It sometimes work and sometimes not (mostly not)
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
Simple provider - <ToastProvider />
addToast({
title: "Toast title",
timeout: 2000,
description: "Toast displayed successfully",
color: "success",
});
addToast({
title: "Toast title",
timeout: 2000,
description: "Toast displayed successfully",
color: "warning",
});
addToast({
title: "Toast title",
timeout: 2000,
description: "Toast displayed successfully",
color: "primary",
shouldShowTimeoutProgess: true,
});
Expected behavior
the toasts should expand on hover
Screenshots or Videos
Operating System Version
macOs
Browser
Chrome
![linear[bot] avatar](https://avatars.githubusercontent.com/in/20150?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hi @saurabhguptarock,
Thanks for reporting the issue. I was unable to reproduce it on my end—it works fine for me: CodeSandbox Example.
Could you please clean up your node_modules and cache files and try again? Some users facing issues with toast were able to resolve them by doing a cleanup.
If the issue persists, please share your package.json. We’d be happy to help further.
Thanks for reporting the issue. I was unable to reproduce it on my end—it works fine for me: CodeSandbox Example.
Could you please clean up your node_modules and cache files and try again? Some users facing issues with toast were able to resolve them by doing a cleanup.
If the issue persists, please share your package.json. We’d be happy to help further.
I have tried cleaning my whole code (.next, node_modules), still does not work, I have also tried changing position as well. Below are all the files and video recording
Using bun 1.2 with turborepo
tailwind.config.ts
import { heroui } from "@heroui/react";
import animate from "tailwindcss-animate";
import typography from "@tailwindcss/typography";
import type { Config } from "tailwindcss";
export default {
content: [
"./src/**/*.{js,ts,jsx,tsx,mdx,css}",
"../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {
fontFamily: {
sans: ["var(--font-dm-sans)"],
serif: ["var(--font-bricolage-grotesque)"],
},
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [typography, animate, heroui()],
} satisfies Config;
package.json
{
"dependencies": {
"@clerk/nextjs": "^6.12.0",
"@heroui/react": "^2.7.2",
"@hookform/resolvers": "^4.1.2",
"@prisma/client": "^6.4.1",
"@reduxjs/toolkit": "^2.6.0",
"@tanstack/react-query": "^5.66.9",
"@tanstack/react-query-devtools": "^5.66.9",
"@vercel/analytics": "^1.5.0",
"@vercel/edge-config": "^1.4.0",
"@vercel/flags": "^3.1.1",
"axios": "^1.8.0",
"client-only": "^0.0.1",
"framer-motion": "^12.4.7",
"input-otp": "^1.4.2",
"lodash": "^4.17.21",
"lucide-react": "^0.476.0",
"moment": "^2.30.1",
"mongoose": "^8.10.2",
"next": "^15.1.7",
"next-themes": "^0.4.4",
"nuqs": "^2.4.0",
"razorpay": "^2.9.6",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-hook-form": "^7.54.2",
"react-redux": "^9.2.0",
"react-resizable-panels": "^2.1.7",
"recharts": "^2.15.1",
"server-only": "^0.0.1",
"zod": "^3.24.2"
},
"devDependencies": {
"@repo/eslint-config": "*",
"@repo/typescript-config": "*",
"@tailwindcss/typography": "^0.5.16",
"@types/node": "^22.13.5",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"postcss": "^8.5.3",
"prisma": "^6.4.1",
"tailwindcss": "^3.4.17",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.7.3"
}
}
Layout.tsx file
<ClerkProvider>
<StoreProvider>
<html lang="en" suppressHydrationWarning>
<body
className={`${dmSans.variable} ${bricolageGrotesque.variable} antialiased font-sans`}
>
<NuqsAdapter>
<HeroUIProvider>
<NextThemesProvider
attribute="class"
defaultTheme="system"
enableSystem
>
<ToastProvider />
<ReactQueryProvider>{children}</ReactQueryProvider>
</NextThemesProvider>
</HeroUIProvider>
</NuqsAdapter>
<Analytics />
</body>
</html>
</StoreProvider>
</ClerkProvider>
https://github.com/user-attachments/assets/46828e41-7c93-4727-b019-fa4dc2f045d0
Hey @saurabhguptarock , I am not able reproduce this issue. Maybe can I get an sandbox for this?
Actually, I have the same issue!
const meta: Meta<typeof addToast> = {
title: 'Toast',
component: Toast,
args: {
onClose: action('closed'),
},
decorators: [
(Story) => (
<>
<ToastProvider placement="top-center" />
<Story />
</>
),
],
};
If you have multiple stories that use a addToast function and switch between the stories without closing them, it blocks the effect for some reason? The same happens in our application without switching between pages. Fyi: we are wrapping the HeroUI addToast function to have our own tailwind variants.
This might help to reproduce it: https://github.com/fuf-stack/pixels/blob/main/packages/pixels/src/Toast/Toast.stories.tsx
- clone pixels repo
- make install
- make storybook (make clean storybook to remove node_modules and install + start)
Here is a video of the behavior:
https://github.com/user-attachments/assets/6be4da55-ef6a-473d-b01f-7e1e2b3e54a9
Maybe it is a problem with various heights or widths?
