SweetAlert2 is a popular JavaScript library used for creating beautiful, customizable alert messages and modal popups in web applications. It is a successor to the original sweetalert library, offering more features and flexibility. Using components from libraries such as shadcn and sweetalert2 is as easy as installing their dependencies and using them accordingly. In this blog we will see how I implemented the alert in my project.

Installing Sweet Alert 2 in your project.

We need to install the dependencies of sweet alert and to do so you can run the following code in your terminal.

Npm install

npm install sweetalert2

Yarn install

yarn add sweetalert2

Now that you have installed this you can now use it how you wish to, but before we do that lets explore some of the common features that you can use with sweetalert2.

Sweet Alert 2 features

• Customizable: You can customize the appearance and behavior of alerts, including colors, buttons, icons, and animations.
• Responsive: The alerts are responsive and work well on various devices and screen sizes.
• Modular: You can import the parts that you want and use them
• Promise-based: SweetAlert2 uses promises to handle user interactions, making it easier to integrate with modern JavaScript applications.
• Accessibility: The library includes support for ARIA attributes, improving accessibility for users with disabilities.

Usage of Sweet Alert

import Swal from 'sweetalert2';

Swal.fire({
  text: "Icon Success",
  icon: "success"
});

You can implement it anywhere you would like to in your code and to see more options on how you can be able to customize the alert. you can follow the link : https://sweetalert2.github.io/#usage .

According to the code above here is the picture of the alert usage.

Thank you for reading my blog.