• third party plugins
  • Notyf (Toasts)

third party plugins

Tailwind CSS Notyf (Toasts)

Transform Your User Experience with Seamlessly Integrated and Customizable Toast Notifications, Tailored for Modern Web Applications.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate Notyf JS with FlyonUI.

  • 1
    Installation

    Install notyf using npm:

    npm install notyf
  • 2
    Include Notyf JavaScript and CSS

    Add the following CSS and JavaScript to your page:

    <head>
  <link rel="stylesheet" href="../path/to/notyf/notyf.css" />
</head>
<body>
  <script src="../path/to/notyf/notyf.js"></script>
</body>

    Note: A CDN link will not work here because we need to customize the default Vendor CSS to align with FlyonUI's design.

  • 3
    Update Tailwind Configuration

    Update your Tailwind configuration file to include the path to the Notyf JavaScript files. Additionally, set vendors: true in the FlyonUI config to ensure the override CSS is generated:

    module.exports = {
  content: [
    '../path/to/notyf/**/*.js',  
  ],
  flyonui: {
    vendors: true // Enable vendor-specific CSS generation
  }
}
  • 4
    Initialize Notyf

    Add the initialization JavaScript code for Notyf after including the Notyf JS library. Set up an event listener on any element to trigger the Notyf instance. Ensure this Notyf JS file is monitored by TailwindCSS, as described in step 3.

    For more options and detailed configurations, refer to the Notyf JS documentation .

    // Notyf instance
const notyf = new Notyf();
// Trigger Notyf on button click
document.getElementById('trigger-btn').addEventListener('click', function () {
  notyf.success('This is a primary notification!');
});

Basic example

Default notyf

Use the example below for default notification, initialized with the JS code provided below.

Custom notyf

Use the example below for custom notification, initialized with the JS code provided below.

Advance options

Notyf generator

Use the Notyf generator below to create custom notifications according to your requirements for position, type, behavior, message, and duration.