Components

Scroll Progress

A fixed 2px accent bar that fills as the page scrolls, smoothed by a spring so the fill glides rather than jitters.

Scroll the page — the bar above fills with it, smoothed by the glide spring.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add scroll-progress

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { ScrollProgress } from "@lumora/ui/components/scroll-progress";
// or from the barrel:
import { ScrollProgress } from "@lumora/ui";

Props worth knowing

position: "top" | "bottom" picks the viewport edge. The 2px fill is smoothed by the glide spring; with reduced motion it tracks scroll directly. This very page mounts one — watch the top edge as you scroll. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.