308

Next.js

PreviousNext

Integrating BProgress in your Next.js app.

App Router

Run the following command:

pnpm dlx shadcn@latest add junwen-k/ui-x/bprogress-provider-next-app

Wrap your root layout with the <BProgressProvider /> component:

app/layout.tsx
import { BProgressProvider } from "@/components/bprogress-provider";
 
export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <head />
      <body>
        <BProgressProvider>{children}</BProgressProvider>
      </body>
    </html>
  );
}

Pages Router

Run the following command:

pnpm dlx shadcn@latest add junwen-k/ui-x/bprogress-provider-next-pages

Wrap your root layout with the <BProgressProvider /> component:

pages/_app.tsx
import { BProgressProvider } from "@/components/bprogress-provider";
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <BProgressProvider>
      <Component {...pageProps} />
    </BProgressProvider>
  );
}

API Reference

BProgressProvider

Wraps @bprogress/next's progress provider (AppProgressProvider for the App Router, PagesProgressProvider for the Pages Router) with theme-aware defaults, and accepts all of its props — see the BProgress provider documentation for the full list.

PropTypeDefaultDescription
colorstring"var(--primary)"The progress bar color.
heightstring"calc(var(--spacing) * 0.75)"The progress bar height.
optionsProgressOptions{ showSpinner: false }BProgress options.
shallowRoutingbooleantrueSkips the progress bar when only search params change.
...propsProgressProviderProps-Props spread to the underlying provider.