They Finally Released This Toast Library

Toast notifications are little messages that pop up for any success, error, or loading events. Their only purpose is to let users know what is currently happening in your app. This one might just be my new favorite.
Sonner 1.0 Release: sonner.emilkow...
-- my links
Discord: / discord
GitHub: github.com/jos...

[@saar5947]

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

[@himurakenshin9875]

😂

[@sujjeee]

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.

[@sohansingh2022]

Yes please

[@adlerspencer]

👍

[@leodlm]

Yessss

[@rahathosen8441]

Yeah, with postgresql

[@cslearn3044]

What is multi tenancy

[@quickkcare605]

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

[@rjwhite4424]

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

[@JerrenT]

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

[@joshtriedcoding]

Thanks for noticing, really like the style too

[@Chris-zt4ol]

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

[@opm_dev]

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.

[@radjee8600]

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

[@fabre6733]

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

[@xhurish]

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

[@ParkourGrip]

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.

[@codewithguillaume]

Dude I love this lib !

[@LC12345]

Josh only reviews German-named packages by this point

[@Nobodylihshdheuhdhd]

​@@ChichaGadhow is it islamic lmao

[@jonathanrees47]

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.

[@mangoman-vx4pz]

True it hurts😂

[@RolandAyala]

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

[@directornovela7774]

This was really helpful man, thanks a lot.

[@dMDzn]

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?

[@joshtriedcoding]

tRPC has the same onSuccess and onError callbacks as react query, those really are the ideal place for toasts

[@dMDzn]

@@joshtriedcoding I downloaded your project and just discovered this. Many thanks for your help.

[@wglint7509]

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 !

[@1weiho]

I think is Snappify!

[@dipteshchoudhuri]

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

[@Sundae-o5f]

Thanks for sharing!

[@samobanijesu]

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

[@amraromoro]

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.

[@Arab_motivation_video]

Sounds cool gonna try this!

[@XboxArqain]

Notistack doesn't get a mention?

[@kazi-shariful-islam]

This is really awesome

[@interceptorghost1149]

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

[@piotrrodzen772]

Loving how easy is to use it

[@bearbricknik]

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

[@ernst367]

Thanks Josh, will give a try soon

[@MathewNiania]

Word of warning: onSuccess and onError API is being depreciated

[@EIsenah]

It already deprecated in the latest version

[@rz_7890]

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").

[@MirkoVukusic]

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.

[@joshtriedcoding]

It starts getting more complicated once you get to the stacking part and making them all the same height, it does involve a tad more logic

[@nickwoodward819]

100% with you on this. But it's also given me the idea to publish a fizz-buzz library to make a similar point in interviews, so there's that :)

[@rand0mtv660]

Basic one does basic things. There are some not so edge cases to solve while doing toast notifications and it's definitely not 20 lines of code when you count logic and styling. I'm not saying it's hard to do, but why bother when someone else invested a lot of time doing that already?

[@MirkoVukusic]

​@@rand0mtv660, well, for standard reasons some avoid dependencies inflation. Optimizing code (most use basic features but install library with full features), easier maintenance (library breaking changes or EOL), learning (people dont know how to do basic stuff lately, or even how they work). Jist checked my toast code on the last project... typescript (tsx), tailwind, 4 styles, stacking, transitions... 100 lines of code, mostly tsx

[@thalesrodriguescardoso]

Dude react hot toast is crazy light lol it makes NO sense to waste time building what has been built a billion times and tested.

[@Pareshbpatel]

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

[@lovrozagar3729]

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 😀

[@otaviofaria5893]

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

[@allayorquvondiqov5778]

Really cool. I want this😍

[@jayantrohila]

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

[@stevebendersky2056]

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

[@cherryfuchs]

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

[@mnikk1]

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

[@marcofaquim]

Mr Josh we need the nextjs shopify full tutorial

[@rodolpheE]

does it work in server components?

[@HorizonHuntxr]

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

[@siya.abc123]

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

[@madebytl]

Can i use them in html code only?

[@sattlerdevelopment]

this for vue would be epic

[@PeriklesPeriklesoglu]

thank you

[@楊冠柏-q6v]

Aren't onError and onSuccess deprecated?

[@will-g9n1l]

Whats the name of the sketching tool? 🤔

[@leonardocastro1568]

Is there a similar library for Vue.js?

[@raed5463]

Does it work on react native ?

[@toshirohitsugaya1465]

Gotta give it a try.

[@SumitSingh-wz3wt]

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. 😊😊

[@amansagar4948]

Does it also work with react native

[@ritikkumarsharma4798]

No

[@iUmerFarooq]

Is this available for Vue/Nuxt?

[@tr.j4079]

It’s kinda buggy unfortunately.

[@adedimolao9094]

So easy to use🔥

[@preciousegwuenu2938]

wow!

[@husseinkizz]

Am trying out now now!

[@mriswan5806]

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

[@noNullMoments]

Meh, ever heard of notiflic

[@vitvitvitvitvitvitvitvit]

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

[@jellyfish1772]

ok i am using it since shadcn added it

[@luckysolanki9440]

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

[@QueeeeenZ]

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

[@dfordemo981]

cool

[@vellankiindeevar5530]

bro use alpine js pls

[@raymondmichael4987]

Wow 😮; Now I need to refactor code 😊

[@naranyala_dev]

tiny lib review, more like this one

[@eesaaphilips9271]

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

[@asimalqasmi7316]

First

[@devalberto]

Can this be used with Vue js?

[@nomadshiba]

cool