They Finally Released This Toast Library 

I love how much effort you put in, all for just a Toast library. Keep it up.

00:04 Sonor 1.0 is a new tool for easily creating toast notifications 00:40 React Hot Toast and Shad CN's built-in toast offer the best of both worlds. 01:18 React Toastify does not match the style of the UI library 01:53 The toast API in the UI library I prefer has a different and more customizable structure compared to React Hot Toast. 02:27 The API is similar to React Hot Toast. 03:03 Toasts are rendered based on a state that is mounted to true. 03:38 React Query is a library that works well with toast notifications. 04:14 React Query and TOS Notification Library Integration

Hey josh can you please make video on multi tenancy?. How to implement it with next js 13. Please I'm waiting it for so longgg.

code animation at 3:22 is really nice. good stuff

dude you literally rock. You tell me what's new and poppin in the npm world and it only makes my life easier when developing

LOL, I just used it today unknowingly that it was actually new, but yeah it is a really nice library to work with, easy to make, and style.

Dude I love this lib !

Josh only reviews German-named packages by this point

FYI, onSuccess and onError is going to be deprecated in react-query future versions

Love the fact that it has a headless option but keeps the animation and expand functionality - something that always made hot toast very hard to customize

Amazing how many people don't seem to realize shadcn is just tw styled radix, or talk about it like is a component library.

The biggest thing sonner has over shad cn is the fact that you can have multiple toasts and that when you hover they read out like that, other than thst no reason to use it over shads as the shads one is by fefault linked to your color scheme and can also take a description besides tbe title

Another amazing video, Josh. Congratulations!! Do you have a toast library recomendation for React Native?

Does it do anything to make sure the toasts disapear when you navigate to a new screen? I usually wrap react-tostify into my own toast solution. It consists of a ToastProvider component inside witch one can render toasts using "const toast = useToast(); toast.error('Test!');" The trick is that all toasts that got spawned inside a ToastProvider automaticaly get closed when that provider is unmounted. This way i can make sure that every screen of the aplication uses a different toast provider and i never have to think about manualy closing toasts again.

As usual very clean thoughts about a precise subject, thanks man for your good work !

Great video! Do you know if you can use custom styling with tailwind classes? As of right now I think you can only specify hex color codes under style for for example the background color but since I am using a light and dark mode, I configured a specific color for it in my tailwind.config named bg-background-theme but trying to apply this color doesnt work, at least for me

thanks Josh for the big efforts i just wonder if i could use NextJs as a Microservices and Microfronts in the same time as i could build a service in one project with its database and then start a new service and connect them together with event-driven architecture for example is it possible.

Great video! Having toast notifications managed so elegantly with one library is an easy win right there. I wish Angular had the same kind of UI library support that React has.

This was really helpful man, thanks a lot.

Josh, please do a headless Shopify/Bigcommerce full project tutorial with auth, payment and deployment. Currently there is no in-depth tutorial for this anywhere on youtube. Thanks 😀

Have you ever yried out Mantine UI? Would be great if you did a video on it.

Loving how easy is to use it

Nice overview of React Toast Notification Libraries, in particular, sonner 1.0. Thanks, Josh {2025-06-07}

Word of warning: onSuccess and onError API is being depreciated

Sounds cool gonna try this!

Lol I just got done customizing my Shadcn toast component. Let me check Sonner out.

Someone know how can we make animation code like this video in 3:21 or 3:31 ? Thanks in advance for answer ;) and great video like everytime ! And the better toast UI is toastify for me, i have promise toast and it's very easy to use !

In starting I was appreciating shadcn/ui but I think this library misses a lot of components. As i use this library for building one of my company projects and It took way more efforts than i thought off. It's s not mature yet, misses lot of components i.e , Select with search and clear functionality there is command instead bit it has fix size for selecting i.e, 340px then I have to manually add events for that as per screen size, Year picker are missing in Date picker component . It's quite completed to implement searching, sorting & filters as it's use raw tanstack table and there is lot more which i can't even write. But it's good for building small projects and learning purpose. I won't recommend this library for building organisation project you will run into trouble due to projects requirements. 😊😊

Hi, Josh. Is it possible to implement this in a "server side" fasion? If I were to follow similar methods as your TRPC/Quill tutorial and I say have a route in the /api folder that creates a user during which an async request is sent to check if an email address already exists - what way would you send a custom validation message back to the client and display a toast? Would I need to throw a new trpc.TRPCError() or send back a custom error code and catch it on the client?

Thanks Josh, will give a try soon

Also we can make this synergy between axios/ky and toats library.

Maybe I'm too old, but toast library is definitely beyond the line I draw for unnecessary dependencies. It's so simple to write one custom for your project. I don't think basic one is more than 20 lines of code.

Hi josh, do you know how to implement page transition in nextjs 13 app router? I've been searching but what I found mostly makes Layout into a client component ("use client").

Hi, I want to learn more about how to create components and I love the way you did it, could you teach me or make a video on how to do it? This way you can render using a function I liked

This is really awesome

Thanks for sharing!

This is good but unless it supports promise toasts it doesn't make much sense to change from your existing toast library

this for vue would be epic

Can we use sonner in Next js 13 app directory app? I faced some errors when trying to using it

Mr Josh we need the nextjs shopify full tutorial

Notistack doesn't get a mention?

When I used this sooner library, the toast displays along with it's Id. How do I work around that??

Does useSWR also has this kind of error as you showed for react-query?

Can you create a video tutorial for hoting next.js 13 on aws with every reneder stratigy efficently.

thank you

Gotta give it a try.

It’s kinda buggy unfortunately.

oh, i did'nt about on error stuff of react-query. Holy shit, i always handle the errors in .catch()

Whats the name of the sketching tool? 🤔

Meh, ever heard of notiflic

wow!

Am trying out now now!

does it work in server components?

Bro can next u give Reference library chart and lottie files animation for use on library lottie-react

Is there a similar library for Vue.js?

ok i am using it since shadcn added it

Is this available for Vue/Nuxt?

Can i use them in html code only?

Aren't onError and onSuccess deprecated?

So easy to use🔥

Can you please make a clone video using Nextjs13.4, mongodb and JS instead of Ts, please, I want to shift from page to app router, but I use these technologies, and I can't find a better teacher ever and anywhere, so please make a clone video, like i want to use infinite scrolling and 'use client' and 'use server', but you use TS in your videos, so please make a clone like youtube or amazon, please

Does it also work with react native

I hate those toast notifications, they are so annoying. They're bad UX

cool

bro use alpine js pls

Wow 😮; Now I need to refactor code 😊

tiny lib review, more like this one

Maybe I'm missing something here, but why are toasts such a big deal? For my solidjs/react projects I just write my own; it's a few lines of css and two components. These libraries seem a bit overengineered imo

First

Can this be used with Vue js?

cool