A customizable scroll progress bar component for React applications
npm install @leonardobetti/scroll-progress-barA customizable scroll progress bar component for React applications. Built with Tailwind CSS and inspired by shadcn/ui component patterns.
``bashInstall the package
pnpm add @leonardobetti/scroll-progress-bar
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 (
{/ Your content /}
)
}
`$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
``| Prop | Type | Default | Description |
|------|------|---------|-------------|
| className | string | "fixed left-0 top-0 z-50 h-1" | Custom CSS classes for positioning and dimensions |
- React 16.8.0 or higher
- Tailwind CSS 3.0.0 or higher
This component is built using Tailwind CSS and follows the component patterns established by shadcn/ui.
This project is licensed under the MIT License - see the LICENSE file for details.