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

# 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

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

function App() {
  return (
    <div>
      <ScrollProgressBar />
      {/* Your content */}
    </div>
  )
}

Customization

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

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

Colours

By default, the progress bar uses a Tailwind CSS gradient:

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:

<ScrollProgressBar className="fixed left-0 top-0 z-50 h-1 bg-blue-500" />

Example with a custom gradient:

<ScrollProgressBar className="fixed left-0 top-0 z-50 h-1 bg-gradient-to-r from-cyan-500 to-blue-500" />

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.