Ui-Component-SnackBar

Ui-Component-SnackBar is a lightweight snackbar notification component written in pure HTML5, CSS, and vanilla JavaScript that uses Promises to control the display of messages.

What is Ui-Component-SnackBar?

It takes a text message as input and displays it as a styled snackbar bar that appears and disappears, with its lifecycle managed by JavaScript Promises. It runs entirely in the browser without any backend or build step, making it a drop-in solution for any web page. The project is authored by Arslan Ameer and is hosted on GitHub with a live demo page.

Key Features

• Pure vanilla JavaScript — No frameworks, libraries, or build tools; the entire component is written with standard HTML5, CSS3, and JavaScript.
• Promise-based API — Each notification is returned as a Promise, so you can await its completion or chain multiple snackbars in sequence.
• Modern styling — The component uses CSS3 transitions for smooth entrance and exit effects, giving it a clean look.
• Single-file integration — With just the included HTML, CSS, and JS files, you can add snackbar notifications to your page by linking them.
• Lightweight footprint — The component has no dependencies, keeping the added page weight minimal.

Who is it for?

• Web developers who need a simple, self-contained snackbar without pulling in a large library.
• UI/UX designers looking for a clean base to customize with their own brand colors and typography via CSS.
• JavaScript learners who want to study a small, real-world example of Promise usage and DOM manipulation.

What can you do with Ui-Component-SnackBar?

• Show user feedback — Display transient success, error, or informational messages after form submissions or button clicks.
• Sequence multiple alerts — Use Promise chaining to present a series of snackbars one after another, each waiting for the previous to finish.
• Integrate into any site — Since it’s framework-agnostic, you can drop it into plain HTML pages or alongside React, Vue, or other stacks.

How does it work?

The component exposes a function that returns a Promise when a snackbar is shown. The Promise resolves once the snackbar has finished its display duration, letting you write code like await showSnackbar('Hello') and then show the next message. Under the hood, it uses DOM creation and CSS transitions to animate the bar.

Pricing

Free to use — the source code is publicly available in the GitHub repository, and the live demo allows immediate testing.

Alternatives

For other notification options, consider Toastify, a dependency-free toast library, and Noty, another popular notification library.

FAQ

Is Ui-Component-SnackBar free?

Yes, the project is open-source and available on GitHub. You can download or clone the repository and use the component in your own projects without payment or licensing fees.

Does Ui-Component-SnackBar require a framework?

No, it is built with pure vanilla JavaScript, HTML5, and CSS3. There are no dependencies on jQuery, React, Vue, or any other framework, so you can use it directly in any web page.

What does Ui-Component-SnackBar do?

It creates a snackbar — a small, transient notification bar that appears at the bottom (or configured position) of the screen. You pass it a message, and it displays it for a short time before automatically dismissing it.