---

✨ Features

- 🚀 Zero Dependencies - Pure JavaScript implementation, no frameworks required
- 📱 Responsive Design - Perfect adaptation for mobile and desktop
- 🎨 Multiple Styles - Support for success, error, warning, info and more types
- ⚡ Lightweight - Small bundle size with excellent performance
- 🔧 Highly Customizable - Rich configuration options
- 🌙 Theme Support - Built-in light and dark themes
- 📦 Multi-format Support - UMD, ESM, CommonJS formats

🚀 Quick Start

$3

``bash
npm install sonner-js
`

$3

`javascript
import toast from 'sonner-js';

// Simple toast
toast('Hello World!');

// Toast with description
toast('Operation successful', {
description: 'Your data has been saved'
});
`

📖 Usage Guide

$3

`javascript
// Success toast
toast.success('Operation successful');

// Error toast
toast.error('Operation failed');

// Info toast
toast.info('This is an information');

// Warning toast
toast.warning('Please note');
`

$3

`javascript
toast('Confirm action', {
action: {
label: 'Confirm',
onClick: () => console.log('User clicked confirm')
}
});

// With cancel button
toast('Confirm deletion', {
action: {
label: 'Cancel',
onClick: () => console.log('User cancelled operation'),
cancel: true
}
});
`

$3

`javascript
const fetchData = () => fetch('/api/data');

toast.promise(fetchData, {
loading: 'Loading...',
success: 'Data loaded successfully',
error: 'Failed to load data'
});
`

$3

`javascript
// Create toast and get ID
const toastId = toast('Processing...');

// Update toast
toast.success('Processing complete', { id: toastId });

// Dismiss specific toast
toast.dismiss(toastId);

// Dismiss all toasts
toast.dismiss();
`

$3

`javascript
toast('Important notice', {
duration: 0 // Set to 0 for permanent display
});
`

🌐 CDN Usage

$3

`html


`

$3

`html

`

⚙️ Configuration Options

`javascript
import toast from 'sonner-js';

// Global configuration
toast.config({
theme: 'dark', // 'light' | 'dark'
position: 'top-right', // Position
duration: 4000, // Duration in milliseconds
closeButton: true, // Show close button
richColors: true, // Rich colors
expand: true, // Expand animation
visibleToasts: 3, // Number of visible toasts
gap: 8, // Toast spacing
offset: 16, // Margin
mobileOffset: 16, // Mobile margin
dir: 'ltr' // Text direction
});
``

📄 License

MIT License - see LICENSE file for details.