KQ-517 · ROUTE/BAR

Route Bar

The bar at the top of a page change. It appears at 8% and trickles toward 90% on a decaying schedule, so a slow route keeps moving without ever claiming to be nearly done; when the page lands it completes on glide and leaves on the exit ease, with a soft glow at its head. Purely presentational — hold active true while a navigation is pending, or call start() and done() on the ref.

KQ-517 · ROUTE/BAR

Waylight · Overview

Open orders: 34
In transit: 12
Held at depot: 3

View overview

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/route-bar

Props

active: boolean; default false; True while a navigation is pending.
height: number; default 2; Bar height in px.
color: string; default var(--primary); CSS colour for the bar and its head glow.
label: string; default Page loading; Names the progress bar for assistive technology.
ref: React.Ref<RouteBarHandle>; default —; Imperative start() and done(), OR'd with the active prop.

Prop	Type	Default	Description
active	boolean	false	True while a navigation is pending.
height	number	2	Bar height in px.
color	string	var(--primary)	CSS colour for the bar and its head glow.
label	string	Page loading	Names the progress bar for assistive technology.
ref	React.Ref<RouteBarHandle>	—	Imperative start() and done(), OR'd with the active prop.