# vanilla-sonner A lightweight port of [Sonner](https://github.com/emilkowalski/sonner) for vanilla JavaScript. vanilla-sonner brings elegant and customizable toast notifications to your web applications without any framework dependencies. ## ✨ Features Framework Agnostic: Works with any vanilla JavaScript project. Highly Customizable: Control position, theme, duration, and content (plain, description, success, info, warning, error). Rich Colors: Option to use rich, type-specific colors for enhanced visual feedback. Interactive: Toasts expand on hover for better readability and pause their removal. ## 🚀 Installation ### via npm ```bash npm install vanilla-sonner ``` via CDN: ```html ... ... ``` via Manually: ```html ... ... ``` ## 💻 Usage To get started, you'll need to include the toaster container in your HTML and then use the toast function in your JavaScript. ### Add the Toaster Container Place an `
    ` element with the `id="sonner-toast-container"` in your index.html (or main application file). This element serves as the main container for all toasts and allows for global configuration via data attributes. ```html ...
    ... ``` ## Import and Use Toasts After setting up your container, import the toast function into your JavaScript file and use it to display notifications. If you're including the script directly in your HTML, toast will be globally available on the window object. ```js import { toast } from 'vanilla-sonner'; // If using ES Modules import 'vanilla-sonner/style.css'; // Required styles // Basic toast toast('My first vanilla toast!'); // Toast with a description toast.message('Update available', 'New version 1.2.0 available for download.'); // Success toast toast.success('Event created successfully!'); // Info toast toast.info('5 tasks completed!'); // Warning toast toast.warning('Please save your changes before closing!'); // Error toast toast.error('Something went wrong!'); // Custom toast (requires a