Stay up to date with new components!
Error!
Success! Thanks so much 🥰

Web Components On Fire

How to use it

Annotated Source Code: Lightbox

Our HotFXLightbox custom element is a minimalist carousel that appears in a fullscreen modal. The idea here was to provide a zero-configuration default experience, but also allow the user to customize it if they wish to change the design or behavior of the lightbox.

This element uses the HTML <dialog> element and CSS scroll snaps to rely on the browser for a lot of functionality that would have taken a lot of custom JavaScript in years past.

There are some new CSS features like @starting-style that would help us even more, but they still haven’t gotten the necessary browser support in 2024.