Toast notifications with Sveltekit and Tailwind CSS
Keep users informed on your Svelte app by building responsive toast notifications with SvelteKit & Tailwind CSS.
Tailwind CSS
SvelteKit
Free
Level 4
Toast notifications
Inform users of important updates or actions they need to take with toast notifications.
Overview
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
What's included
Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.
- Organized Figma design file
- Detailed desktop, tablet, and mobile layouts
- Comprehensive design system
- Relevant fonts, colors, SVGs, and images
- Alternative Solutions from members
- Straightforward quick-start guide
- Recommended list of learning resources
- Access to community Discord channels