retro-toast
v1.0.2
Published
Retro CRT-style toast notifications for React made by WebGallery
Downloads
272
Maintainers
Readme
🎮 Retro-TV Toast
A retro-styled toast notification component for React & Next.js with authentic CRT monitor aesthetics, scanlines, and three customizable themes.
📺 Features
🎨 Three Distinct Themes
- Dark Theme: Classic CRT monitor with green scanlines (light text on dark background)
- Light Theme: Modern monitor display (dark text on light background)
- Custom Theme: User-defined background color with automatic text contrast
📟 Authentic Retro Effects
- Moving CRT scanlines with different colors per theme
- TV noise/static overlay for vintage feel
- Pixel-perfect borders and corners
- VHS-style glitch animations on hover/exit
- Progress bar with pause-on-hover functionality
🎯 Four Notification Types
- ✅ Success: Green theme for positive confirmations
- ❌ Error: Red theme for critical errors
- ⚠️ Warning: Yellow theme for warnings
- ℹ️ Info: Blue theme for informational messages
⚡ Modern Features
- TypeScript support with full type definitions
- Customizable duration (1-10 seconds)
- Click-to-dismiss or auto-dismiss
- Smooth entrance/exit animations
- Responsive design for all screen sizes
- Hover to pause countdown
- Accessible with ARIA labels
🚀 Live Demo
👉 https://retro-toast.vercel.app
📦 Installation
npm install retro-toast
# or
yarn add retro-toast