Command Palette

Search for a command to run...

GitHubGitHub

Next.js

Integrating BProgress in your Next.js app.

App Router

Run the following command:

pnpm dlx shadcn@latest add https://ui-x.junwen-k.dev/r/bprogress-provider-next-app.json

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 https://ui-x.junwen-k.dev/r/bprogress-provider-next-pages.json

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>
  );
}