Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

Tailwind CSS Toast Notifications

Use lightweight, customizable toast notifications to engage visitors with sleek and user-friendly alert messages.

Requires Additional Installation

Note that this component requires the use of the third-party Toastify plugin.

Installation

  1. Install Toastify

    Install toastify via npm

    Terminal
                              
                                npm i toastify-js
                              
                            
  2. Add the Toastify JavaScript

    Include the JavaScript <script> near the end of your </head> tag:

    HTML
                              
                            

Triggered notifications

Trigger Toastify notifications from a button, alternating between compact and richer toast layouts.

© 2026 Preline Labs.