NavigationProgress

NavigationProgress(props): Element | null

Defined in: packages/ui/src/components/navigation-progress.tsx:22

Thin progress bar fixed to the top of the viewport during React Router navigation.

Uses useNavigation().state from React Router to detect loading transitions. Visible when state === "loading", hidden when state === "idle". No configuration is required beyond dropping it into your root layout.

Parameters

props

NavigationProgressProps

See NavigationProgressProps.

Returns

Element | null

Example

// In your root layout:
<NavigationProgress />

// With custom color:
<NavigationProgress color="#e91e63" />