React Scroll Progress Bar

A customizable scroll progress bar component for React applications. Built with Tailwind CSS and inspired by shadcn/ui component patterns.

Installation

``bash


Install the package

pnpm add @leonardobetti/scroll-progress-bar

Run the install script to add the component to your project

npx install-scroll-progress
`

The component will be added to your project in:
`
components/ui/scroll-progress-bar.tsx
`

Usage

`tsx
import { ScrollProgressBar } from "@/components/ui/scroll-progress-bar"

function App() {
return (



)
}
`

$3

You can customize the positioning and dimensions using the className prop:

`tsx
className="fixed left-0 top-0 z-50 h-2" // Custom classes for positioning and height
/>
`

$3

By default, the progress bar uses a Tailwind CSS gradient:
`tsx
bg-gradient-to-tr from-indigo-800 via-indigo-700 to-indigo-900
`

You can change this by:
1. Using a solid colour from Tailwind's colour palette
2. Creating your own gradient using the Tailwind Gradient Generator

Example with a solid colour:
`tsx

`

Example with a custom gradient:
`tsx

``

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| className | string | "fixed left-0 top-0 z-50 h-1" | Custom CSS classes for positioning and dimensions |

Requirements

- React 16.8.0 or higher
- Tailwind CSS 3.0.0 or higher

Credits

This component is built using Tailwind CSS and follows the component patterns established by shadcn/ui.

License

This project is licensed under the MIT License - see the LICENSE file for details.