NProgress

Show feedback when switching pages and content is loading in the background.

Theming

The NProgress component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Chakra UI Component Style page.

Anatomy

  • container
  • bar

Default theme

import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
import { nprogressAnatomy } from '@saas-ui/theme/anatomy'


export const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(nprogressAnatomy.keys)


const baseStyle = definePartsStyle((props) => {
  const { colorScheme: c } = props
  return {
    bar: {
      bg: `${c}.500`,
      _dark: {
        bg: `${c}.500`,
      },
    },
  }
})


export const nprogressTheme = defineMultiStyleConfig({
  defaultProps: {
    colorScheme: 'primary',
  },
  baseStyle,
})

Customize the theme

Use the SuiNProgress key to customize the theme.

import { extendTheme } from '@chakra-ui/react'


const extendTheme({
  components: {
    SuiNProgress: {
      defaultProps: {
        colorScheme: 'primary',
      },
      baseStyle: {
        bar: {
          bg: 'red.500',
          _dark: {
            bg: 'red.500',
          },
        },
      },
    },
  },
})

Was this helpful?