Navigation Progress

A top-of-page progress bar for route transitions.

Installation

Add the navigation progress component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/navigation-progress.json

Usage

Mount NavigationProgress once in your root layout. It renders a fixed progress bar during client-side route transitions and is not designed for inline component previews.

import { NavigationProgress } from "@/components/ui/navigation-progress"

// Mount once in your root layout
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <NavigationProgress />
        {children}
      </body>
    </html>
  )
}