Vanilla Web Components: Accordion, Float Bar & Fly-Out

Web Components are a browser standard that lets you build your own, reusable HTML elements — with no framework required. Once written, they work anywhere: in a plain static HTML page just as well as in a React, Vue, or Angular project, because they simply rely on native browser features.

I published three such components as npm packages: an accordion, a float bar, and a fly-out panel. All three are dependency-free, accessible, and installable straight from npm.

Accordion

An accessible accordion with smooth expand/collapse animations. <accordion-item> elements define individual panels, which can be controlled by click, keyboard (Enter/Space), or programmatically (show(), close(), toggle()).

Especially handy: wrapping multiple items in an <accordion-group> ensures only one can be open at a time — ideal for FAQ sections. Nested accordions are also supported. Animation duration and easing are freely configurable via attributes, and thanks to ARIA attributes and automatic keyboard handling, the component is accessible out of the box.

Float Bar

A floating bar that automatically hides when scrolling down and reveals itself again when scrolling up — a classic pattern for navigation bars that stay out of the user's way while remaining quickly accessible.

The component automatically detects whether it sits inside the window or a scrollable container, animating smoothly with requestAnimationFrame. The offset attribute (or offset-element, which takes another element's height) lets you account for fixed headers. As soon as the bar reaches its sticky position, it automatically gets an is-sticky class, which can be used to style shadows or a blurred background, for example.

Fly-Out

A slide-in panel that can enter from any of the four screen edges (top, bottom, left, right) — useful for sidebars, mobile menus, or bottom sheets. It's controlled via a dedicated <fly-out-toggle> element, linked to the matching <fly-out> panel through the name attribute.

The component includes everything needed to make a modal panel accessible: a focus trap, ESC-to-close, automatic focus on the first interactive element when opened, and focus restoration when closed. The background overlay, click-outside-to-close, and body scroll locking can each be disabled individually. Control is available both declaratively and programmatically (open(), close(), toggle()), including custom events like fly-out-opened and fly-out-state-changed.

All three components are written in TypeScript, ship with zero external dependencies, and are built on the Custom Elements v1 and Shadow DOM v1 web standards — meaning they run in any modern browser and drop into any project, regardless of the framework in use.