Floating tooltipOne shared hint that follows the pointer and slides between triggers.
Parts you stop writing twice
Reuse is a set of interface parts we use across many products: a lightbox, a carousel, tooltips, loaders and a few more. What carries from one product to the next is not the code, but the rules behind it.
Every part comes with a short list of principles: how it scrolls, where focus goes, what it cleans up, how it moves. The code is one way to keep them. Your coding agent reads them before it builds, so the part behaves the same in React, Vue, plain JavaScript or anything else.
The small ones
Each card runs the real module. Point along the toolbar, move through the menu, press and hold.
Moving highlightOne background that slides to the row under the pointer, the focus or the selection.
Release early to cancel
Hold to confirmA button that acts only after a full press. Let go early and nothing happens.
LoadersA few dots that change shape while an answer is on its way.
Carousel
Drag it with a mouse or scroll it with a trackpad. Every image opens in the lightbox.
The rules every part follows
They are why a part written once keeps working in the next project, whatever it runs on.
Run on any stack. Each part is a plain browser module with a thin React wrapper, so it works the same in Vue, Svelte or a page with no framework.
Build on the browser. Parts use what modern browsers already do well: native dialogs, CSS scroll snap and CSS animations. They stay small and feel native.
Leave the page alone. Styles stay inside the part and never reach the rest of your page. When a part is removed, it takes everything it added with it.
Work from the keyboard. Real buttons, dialogs and focus order let every part work without a mouse and with a screen reader.
Move calmly. Motion can be interrupted halfway without a jump, and it stops when your system asks for less motion.
Write the rules down. Each library lists its principles and ships a guide, so your coding agent can rebuild it on any stack and keep them.