Scroll Bars

Component 17

About

An animated ruler-style scroll progress indicator that moves an accent marker across a row of bars as the page scrolls.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Bars to your project and fits it to your theme.

Code

How Scroll Bars is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { ScrollBars } from "@/components/ui/scroll-bars"
import { useRef } from "react"
import { useScroll } from "motion/react"

export default function Default() {
  const ref = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({ container: ref })

  return (
    <div className="flex w-full flex-col items-center gap-6 p-8">
      <ScrollBars scrollYProgress={scrollYProgress} rounded />
      <div
        ref={ref}
        className="h-64 w-full max-w-md overflow-y-auto rounded-xl border border-border p-4"
      >
        <div className="space-y-4">
          {Array.from({ length: 20 }).map((_, i) => (
            <p key={i} className="text-sm text-muted-foreground">
              Keep scrolling to watch the accent indicator glide across the bars as
              your scroll progress advances.
            </p>
          ))}
        </div>
      </div>
    </div>
  )
}