Nprogress - Mantine — ContextQMD

import { NprogressDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Nprogress);

Installation

After installation import package styles at the root of your application:

tsx

import '@mantine/core/styles.css';
// ‼️ import nprogress styles after core package styles
import '@mantine/nprogress/styles.css';

Setup NavigationProgress

Render the NavigationProgress component anywhere in your app within MantineProvider:

tsx

import { MantineProvider } from '@mantine/core';
import { NavigationProgress } from '@mantine/nprogress';

function Demo() {
  return (
    <MantineProvider>
      <NavigationProgress />
    </MantineProvider>
  );
}

Usage