MiniDev UI

Scroll Progress Rail

Motion

A React reading progress bar that fills with page scroll on a spring, with section labels such as intro, product, proof and pricing shown beneath it.

src/registry/premium/scroll-progress-rail.tsx/r/scroll-progress-rail.json

Installation#

bash
npx shadcn@latest add @minidev/scroll-progress-rail

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/scroll-progress-rail.json

Usage#

tsx
import { ScrollProgressRail } from "@/components/ui/scroll-progress-rail"

export function Example() {
  return <ScrollProgressRail />
}

API reference#

ScrollProgressRail props
PropTypeDefault
labelsstring[]["Intro", "Product", "Proof", "Pricing"]
classNamestring-

Dependencies#

npm

motion

Built from

No other MiniDev files

Related navigation components#

DockA macOS style dock for React: icons magnify under the pointer with spring physics and show a label. Real buttons or links, keyboard reachable and labelled.Animated TabsTabs with a sliding pill indicator and panels that fade in the direction of travel. Full WAI-ARIA tabs keyboard support with Arrow keys, Home and End.Back LinkSmall back navigation link with a left arrow icon, muted text that darkens on hover and a visible focus ring. Defaults to the label Back and accepts any href.Breadcrumb EllipsisEllipsis marker for collapsing the middle of long breadcrumb trails. Decorative and hidden from assistive tech, sized to sit between breadcrumb separators.BreadcrumbBreadcrumb navigation from an items array, with chevron separators, linked ancestors and the current page marked with aria-current. Built with React.Collapsible SidebarSidebar with a toggle button on its edge that collapses it to a narrow rail and expands it again. The button label updates for screen readers.
All navigation components