🚀

Installation

Get up and running in under 2 minutes

📋Requirements

Next.js with App Router (required)
Tailwind CSS (optional - for advanced styling)

📦Step 1: Install the Package

Choose your preferred package manager:

npm

npm install next-progressbar-link

yarn

yarn add next-progressbar-link

pnpm

pnpm add next-progressbar-link

⚙️Step 2: Add to Root Layout

Import and add the NavigationProgress component to your root layout:

// app/layout.tsx
import { NavigationProgress } from 'next-progressbar-link';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NavigationProgress />
        {children}
      </body>
    </html>
  );
}

🎯Step 3: Use the Link Component

Replace your next/link imports:

import Link from 'next-progressbar-link';

export default function Page() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

🎉

That's It!

Your app now has a beautiful progress bar during navigation. Want to customize it?

Customization Guide Try Control Panel

💡Troubleshooting

Progress bar not showing?

Make sure you're using Next.js App Router (not Pages Router) and that NavigationProgress is added to your root layout inside the body tag.

Links not working?

The Link component is a wrapper around next/link, so all props work the same. Make sure your href paths are correct.