vibecodng.com

Free MCP betaIndex and tools live

Measured entry

reui-scrollspy

scroll-effectminimal-flatmotion on file

A client-side React wrapper that tracks section positions, marks matching navigation children through data attributes, scrolls them smoothly, and syncs the URL hash. It ships as a TypeScript registry component with no declared package or registry dependencies, but it relies on browser DOM APIs and React hooks.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of reui-scrollspy at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of reui-scrollspy at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of reui-scrollspy at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for reui-scrollspy
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal21.5 KB (87.0 KB build, 65.5 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A compact, dependency-free choice for conventional documentation and settings pages. It mounted cleanly and needs no provider, but its data-attribute API is manual, scroll work runs on every captured event, and the unused throttle option makes it less suitable for demanding or unusual layouts.

Use it if

  • You need a table of contents that follows scrolling inside the page or a referenced scroll container.
  • Your navigation and content already use stable section IDs and can adopt the component's data-attribute contract.
  • You want smooth anchor scrolling, configurable offsets, and URL hash updates without adding an observer library.

Skip it if

  • Your navigation must work without client-side JavaScript or browser DOM access.
  • Your product must not alter the URL hash as users scroll, unless you are prepared to disable that behavior.
  • Your sections use complex nested scrolling or transformed layouts where offsetTop is not a reliable position model.
  • You need built-in throttling, since the exposed throttle option is not implemented in the source.

Install

Installation record for reui-scrollspy
Declared dependenciesnone declared
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, copy the client component into the source tree and ensure the React TypeScript build accepts client directives. Add matching section IDs and navigation data attributes, pass a scroll-container ref when needed, and provide your own active-state styling. No extra package or provider is required.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/keenthemes/reui
License
MIT
Record published
2026-08-18

Alternatives

Other published entries for the scroll-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.