Toast🍞

[EternalBlack]

Problem or use case

Sometimes we'd like to give the user a frontend toast notification of some sort (new message, upload progress, whatever).

Proposed solution

Maybe a toast/sonner would be great thing to have. Something like https://ui.shadcn.com/docs/components/sonner
Maybe using https://github.com/emilkowalski/sonner or https://github.com/timolins/react-hot-toast.

[kingmammad]

Add toast provider at root layout ().

Trigger notifications on user events (e.g., API success, error, message received).

Support multiple variants: success, error, loading, info.
`import { Toaster, toast } from "sonner";

export default function App() {
return (
<>
<button onClick={() => toast.success("Message sent!")}>
Send Message


</>
);
}
`

[EternalBlack]

I do know how to implement that myself - that't not the point. It's about having something like that using the design system of untitled-ui though. Maybe even with extensive examples showing images, progess, actions inside the toast/sonner.
Adding it plainly like that gives you the default style from their packages that clashes with the untitled-ui one - Doesn't feel integrated.

[kingmammad]

Oh i get it thanks i will check it

[deebov]

Hey @EternalBlack, we already have toasts (they're just called notifications):

https://www.untitledui.com/react/components/notifications

[deebov]

Though, unfortunately they're under the PRO plan as of now.

[EternalBlack]

Ah, my bad. Only searched for 'toast' and 'sonner' and it didn't show up. Good to know! Thanks! Can't really afford PRO currently as it's mainly a hobby/non-profit but good to know nonetheless. Going to implement it myself then probably.