AtroUIAtroUI
DocsBlog
StarOwn the UI
  • Introduction
  • Installation
  • Host APIs
  • Registry
  • Theming
  • Brand kit
  • Identity kit
  • Launch workflow
  • Collections
  • Glossary
  • Compare
  • Changelog
  • Blog
  • Updates
  • ButtonCLI
  • CardCLI
  • Form SelectCLI
  • TextareaCLI
  • BreadcrumbsCLI
  • ProseCLI
  • Founder AvatarCLI
  • Theme ToggleCLI
  • Adaptive Theme SwitchCLI
  • Theme ProviderCLI
  • LogoCLI
  • Mockup FrameCLI
  • TimelineCLI
  • Fade InCLI
  • StaggerCLI
  • Scroll ProgressCLI
  • Site HeaderCLI
  • Site FooterCLI
  • Bold FooterCLI
  • HeroCLI
  • PrincipleCLI
  • WorkCLI
  • CraftsCLI
  • LabCLI
  • WhoCLI
  • PricingCLI
  • Feature GridCLI
  • Logo CloudCLI
  • FAQCLI
  • Contextual CTACLI
  • Exit IntentCLI
  • Contact FormHost API
  • Calendly EmbedCLI
  • Waitlist FormHost API
  • Newsletter FormHost API
  • JournalCLI
  • Social ShareCLI
  • ResourcesCLI
  • Before / AfterCLI
  • Case StudyCLI
  • AR PortfolioCLI
  • Made With EmbedCLI
  • Count UpCLI
  • Deadline CountdownCLI
  • CurrentlyCLI
  • Project ListCLI
  • Log PreviewCLI
  • ChangelogCLI
  • Command MenuCLI
  • RevealCLI
  • Theme Toggle IconCLI
  • Site Header NarrowCLI
  • Site Footer NarrowCLI
  • Social FloatCLI
  • Reading ShelfCLI
  • Personal HeroCLI
  • ResumeCLI
  • Local ClockCLI
  • Weather ChipCLI
  • Stack ListCLI
  • OG ExamplesCLI
  • OG Live PreviewCLI
  • OG WorkspaceHost API
  • Thumbnail PreviewCLI
  • Thumbnail WorkspaceHost API
  • Project PlannerCLI
  • Scope ChatHost API
  • Live DashboardCLI
  • Analytics ProviderCLI
  • JSON-LDCLI
  • Testimonial SchemaCLI

Loading

Primitive

CLI registry

Scroll Progress

Reading-progress bar. Production mounts it fixed on the viewport; the preview tracks a local scroll container.

Preview → install → use

01

Preview

$npx shadcn@latest add @atroui/scroll-progress

ScrollProgress

Scroll the panel - the brand bar tracks local progress.

Reading pane

Section 1. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 2. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 3. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 4. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 5. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 6. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 7. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 8. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 9. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 10. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 11. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Section 12. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.

Source lands in your repo. Setup: Installation · Registry catalog.

02

Usage

Usually fixed to the top of the viewport with bg-brand.
03

API reference

PropTypeDefaultDescription
classNamestring-Positioning + color classes (e.g. fixed, bg-brand).
containerRefRefObject<HTMLDivElement>-Scroll container. Defaults to the document.
springOptionsSpringOptionsstiffness 200Motion spring for scaleX.

Related

  • Button
  • Card
  • Form Select
  • Textarea

Scroll Progress

PreviousStaggerNextSite Header