Toast notifications with Sveltekit and Tailwind CSS
Keep users informed on your Svelte app by building responsive toast notifications with SvelteKit & Tailwind CSS.
Inform users of important updates or actions they need to take with toast notifications.
Your Challenge is creating a toast notification system that neatly displays custom messages. Toast notifications are useful for websites because they provide a non-intrusive way to inform users of important updates or actions they need to take.
Your Challenge is complete when:
The component is as close to the original design as possible
Elements have the correct state styles (hover, focus, etc.)
Notifications stack on top of each other
Notifications automatically disappear after so many seconds
Notifications can be styled quickly depending on props
Bonus for animating the in and out transitions
Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.