Notifications/Toast Component

[divine]

Notifications as a component would be a great addition.

https://tailwindui.com/components/application-ui/overlays/notifications

https://ant.design/components/notification/
https://vue.chakra-ui.com/toast

[holtergram]

I like these examples a lot
Vuesax Notifications

[RejownAhmed]

Try this: However, I did not include tailwind yet, although examples are with tailwind. https://vue-modern-notification.netlify.app/

[RejownAhmed]

Any contribution is welcome. Also, it would be great if a notification component is introduced in Headless UI

[mquadrat]

This is really missing as it is one of the components in TailwindUI. And quite frankly the existing notification plugins (at least for vue) mostly suck.

[binajmen]

Up 🆙 That would be awesome 👍

[james-gardner]

Isn't a toast message just another form of modal dialogue? In which case what's lacking here is the behaviour behind managing their display and disposal. I'm not sure that has a place in this library. Open to being convinced otherwise.

[mquadrat]

Well, that might be an option. However it would require a lot of custom code (or I'm just thinking too complicated right now). I'll see if I can come up with a solution that uses modals.

[jstnmthw]

I stumbled upon this thread for this very thing. I was looking for a way to remove the Dialogs default of adding padding and removing scroll overflow because this is unessecary for the toast notification. As of now, I can't find a solution. I have everything working intended for Dialog to be a Toast notfication except those stylings being added.

[DannyDelott]

For anyone still curious about this, we were able to use react-hot-toast with the Tailwind UI notification components pretty easily.
https://react-hot-toast.com/docs/version-2

[timolins]

Make sure to check this example on how to combine headless-ui with react-hot-toast. 👍

[williamlmao]

+1 for toasts. Modal doesn't work because it overlays on top of everything and prevents interaction with other elements on the page.

[Harrald]

+1. Modal is not suitable for this.

[felixmokross]

I also just tried with a Modal component until I realized the scroll locking (it's even mentioned in the docs). A Toast component would be nice.

[Harrald]

A modal also steals focus and makes the rest of the page inert. This should not happen with a toast message.

[lennartzellmer]

+1
Something like radix toast would be neat
https://www.radix-ui.com/docs/primitives/components/toast

[arthtyagi]

I've been trying to incorporate Transitions (used in TailwindUI examples) and lol, they simply don't work. The state open is always stuck after the first render unless I manage to do a force update.

[html-3]

Any updates about Dialogs scroll locking?

[rizen]

I'd also love this

[claide]

I need this one too

[JameelKhan9]

+1

[ereburg]

Someday, I believe..)

[ElliottJPerry]

🍞+🔥 🙏

[claudiu909]

+1

[swa-desmat]

+1

[meotimdihia]

Sorry for being rude, but development is super slow, we just get 1 new component/year.
Do we have to switch to react-aria.

And even Tailwindcss founder is using it too:

[meotimdihia]

@mnlfischer TailwindCss founder confirmed we should use other plugins like react-aria on Twitter.
This plugin was built because other plugins don't support Vue. While they are still maintaining this plugin, they don't have a team dedicated to developing new features.

[mnlfischer]

@meotimdihia thanks for this info! Do you have any referenced twitter post?

[meotimdihia]

@mnlfischer He posted here: https://twitter.com/adamwathan/status/1719119230518374478

[mnlfischer]

@meotimdihia thanks for pointing me to it!

[meotimdihia]

@mnlfischer they released Catalyst: https://catalyst.tailwindui.com/docs
It used headless UI too.

[jayatulsiani]

yess, need this for vue

[sebastiantheobald]

+1