Toast

A modern, customizable toast notification system with support for multiple types, positions, and animations. Features automatic dismissal, progress bars, and seamless dark mode integration.

Preview

Test Notifications

Installation

You can add this component to your project using the CLI or by manually copying the code.

npx shadcn@latest add toast.json

Basic Usage

Simple Toast Notifications

Available Notification Types

success - Green notification for successful operations
error - Red notification for errors and failures
warning - Yellow notification for warnings
info - Blue notification for informational messages
loading - Gray notification with spinning animation

Advanced Usage

Toast Manager Hook

Create a custom hook for easy toast management:

Usage with Hook

Loading with Success Transition

For operations that show loading state and then success:

Positioning

Available Positions

Position Styling

Styling & Customization

Custom Colors

Dark Mode Support

The component automatically supports dark mode with Tailwind's dark: prefix:

Best Practices

1. Keep Messages Concise

2. Use Appropriate Durations

3. Provide Context

4. Use Icons Appropriately

5. Handle Multiple Notifications

Common Use Cases

Form Submissions

File Uploads

API Calls

Props Reference

Prop	Type	Default	Description
`type`	'success' \| 'error' \| 'warning' \| 'info' \| 'loading'	-	Notification type
`title`	string	-	Main notification text
`message`	string	-	Optional description
`showIcon`	boolean	true	Whether to show the type icon
`duration`	number	-	Auto-dismiss duration in ms
`onClose`	() => void	-	Callback when notification is closed

Accessibility

Screen Reader Support: Proper ARIA labels and roles
Keyboard Navigation: Close button is keyboard accessible
Focus Management: Maintains focus context
Color Contrast: Meets WCAG guidelines for text contrast
Motion Preferences: Respects prefers-reduced-motion

Performance Tips

Limit Concurrent Notifications: Don't show too many at once
Use Appropriate Durations: Balance visibility with user experience
Cleanup Timeouts: Clear timeouts when components unmount
Memoize Callbacks: Use useCallback for onClose handlers
Virtual Scrolling: For many notifications, consider virtualization