Back to UI Components
Components

Scroll Progress

A thin bar that fills as you move down a page, showing how far you have read.

Scroll Progress is a real, MIT-licensed React + Tailwind UI component from the open-source Magic UI library. Run the install command above with the shadcn CLI and it drops the component's actual source straight into your project.

It depends on motion, so make sure those are installed too.

We re-check this entry on a schedule, so the install command keeps pointing at the current registry item.

CategoryComponents
LibraryMagic UI
Dependenciesmotion
npx shadcn@latest add "https://magicui.design/r/scroll-progress.json"

How to use it

  1. Run the install command above — the shadcn CLI drops the real component files into your project.
  2. Install the dependencies listed below it, if any.
  3. Import the component and restyle it with your own Tailwind tokens.
Compiled and written by VintuxAI from public sources.

Related in Components

Magic CardA card that tracks the pointer and lights up its edges when hovered, used to draw attention to selectable itemAI Input SelectorA chat input for AI interfaces that grows as you type, with controls for picking a model and attaching files.Safari BrowserA mock browser window styled like Safari, used to frame website screenshots or previews in an interface.AccordionA stacked list of headers that expand and collapse to reveal or hide their associated content sections within AndroidA visual mockup showing an Android phone frame, useful for previewing mobile app screens.Command ButtonA button showing a command key icon that reveals a keyboard shortcut and sweeps a shimmer across itself when hMacbook ProA vector graphic of a MacBook Pro laptop that can be placed in a page layout.Animated BackgroundAn animated background layer that adds motion behind panels and page sections in a user interface.Warp BackgroundA card whose background warps and bends as though space is being pulled around it, used behind featured contenCard FlipA card that turns over in three dimensions when hovered, showing extra details and a button on its reverse sid
← Back to UI Components