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

Web Components On Fire

Lightbox

Super charge your image gallery with a full-window carousel shown in a modal

Responsive Menu

A hamburger menu element that shows links in a drawer on small screens

Shy Header

Hide your header while the reader scrolls down and show it again when they scroll up.

Slinky

A custom element that makes many elements for expressive silliness. Like a drop shadow on steroids.
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.