Back to components
UI component
Toast
Animated toast notifications with success, error, warning, and info variants.
Install
What it does
- 4 variants: success, error, warning, info with matching colors
- Slide-in animation from top with spring physics
- Auto-dismiss with configurable duration
- Icon per variant via Ionicons
- Singleton hook-based API (useToast)
When to use
Use it
Transient feedback — form submission success, error messages, status updates.
Skip it
Persistent messages or critical alerts (use a modal or banner instead).
Files & routes added
- components/ui/toast.tsx