scroll-progress

1import { ScrollProgress } from "@/components/magicui/scroll-progress";
2 
3export function ScrollProgressDemo() {
4  return (
5    <div className="z-10 rounded-lg border border-gray-200 bg-white p-4">
6      <ScrollProgress className="top-[65px]" />
7      <h2 className="pb-4 font-bold">
8        Note: The scroll progress is shown below the navbar of the page.
9      </h2>
10      <p className="pb-4">
11        Magic UI is a collection of re-usable components that you can copy and
12        paste into your web apps. It primarily features components, blocks, and
13        templates geared towards creating landing pages and user-facing
14        marketing materials.
15      </p>
16    </div>
17  );
18}