KQ-2128 · BACK/STACK

Back Stack

An app header whose Back and Forward know where they lead: Back names the page it returns to — a chip that slides out from under it on springs.snap, a label it always carries, or a tooltip — and holding either button fills a bar under it on a linear tween until the whole history drops from under the header, unrolling on an enter tween while its entries arrive newest first in cascade() order on snap with the current one marked. Choosing an entry jumps there and the page slides in from the side the jump went on springs.glide while the old one leaves on the exit ease; related links push onto the history and drop the pages ahead. Alt with Left and Right moves, Alt+Down (or Down on either button) opens the stack, right-click and a touch long press open it too, and Escape closes it back onto the button that opened it.

KQ-2128 · BACK/STACK

BillingChange the address on an invoice

Billing

Change the address on an invoice

Edit the billing address in Settings, then reissue any invoice from the last twelve months with the new one.

Hold Back for the history · Alt ← → move · Alt ↓ opens it

4 of 5 · Change the address on an invoice · back: Refunds for annual plans

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/back-stack

Props

pages: BackStackPage[]; default defaultBackStackPages; Every page the session can reach: { id, title, section, icon?, summary, links? }. Links are page ids shown as related links that push onto the history.
history / defaultHistory: BackStackVisit[]; default defaultBackStackHistory; The visits, oldest first: { page, at } with at in ms. Controlled or initial.
index / defaultIndex: number; default 3; Where in the history the visitor is, controlled or initial. The first and last positions turn Back and Forward off.
onNavigate: (index: number, visit: BackStackVisit, via: "back" | "forward" | "stack" | "link") => void; default —; Fires from the press, key, stack choice or link that moved, with where it landed and how.
onHistoryChange: (history: BackStackVisit[], index: number) => void; default —; Fires when the history itself changes: a link pushed a page (dropping those ahead), or it was cleared.
onClearHistory: () => void; default —; Fires from Clear history at the foot of the stack, which keeps only the current page.
stackOpen / defaultStackOpen: boolean; default false; Whether the history stack is dropped, controlled or initial. A stack the host opens never moves focus; one the visitor opens focuses the current entry.
onStackOpenChange: (open: boolean) => void; default —; Fires from the hold, key, right-click, choice, outside press or Escape that opened or closed the stack.
holdMs: number; default 450; How long Back or Forward is held before the stack drops, ms. A release before then is an ordinary press.
now: number; default defaultBackStackNow; The time visits are measured from ("2 min ago"), ms since the epoch — never read from the clock during render.
labelMode: "hover" | "always" | "tip"; default "hover"; How Back names where it leads: a chip that slides out on hover or keyboard focus, a label it always carries (cross-sliding as it changes), or a tooltip with the shortcut.
stackStyle: "list" | "cards" | "rail"; default "list"; How the dropped history reads: plain rows, cards that deal down from a pile, or a timeline rail with the pages ahead on a dashed segment.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; The current entry, the hold bar and the related links: a named accent or any CSS colour.
product: string; default "Waylight Help"; The product the header belongs to; the accessible name of the piece.
onSearch: () => void; default —; Shows a Search help button at the right that calls this.
status: "ready" | "loading" | "error"; default "ready"; Page state: loading shows a skeleton page, error offers Retry. The header keeps working.
onRetry: () => void; default —; Called by the error state's Retry button.
disabled: boolean; default false; Turns the header and the links off.
className: string; default —; Classes for the outer section.

Prop	Type	Default	Description
pages	BackStackPage[]	defaultBackStackPages	Every page the session can reach: { id, title, section, icon?, summary, links? }. Links are page ids shown as related links that push onto the history.
history / defaultHistory	BackStackVisit[]	defaultBackStackHistory	The visits, oldest first: { page, at } with at in ms. Controlled or initial.
index / defaultIndex	number	3	Where in the history the visitor is, controlled or initial. The first and last positions turn Back and Forward off.
onNavigate	(index: number, visit: BackStackVisit, via: "back" \| "forward" \| "stack" \| "link") => void	—	Fires from the press, key, stack choice or link that moved, with where it landed and how.
onHistoryChange	(history: BackStackVisit[], index: number) => void	—	Fires when the history itself changes: a link pushed a page (dropping those ahead), or it was cleared.
onClearHistory	() => void	—	Fires from Clear history at the foot of the stack, which keeps only the current page.
stackOpen / defaultStackOpen	boolean	false	Whether the history stack is dropped, controlled or initial. A stack the host opens never moves focus; one the visitor opens focuses the current entry.
onStackOpenChange	(open: boolean) => void	—	Fires from the hold, key, right-click, choice, outside press or Escape that opened or closed the stack.
holdMs	number	450	How long Back or Forward is held before the stack drops, ms. A release before then is an ordinary press.
now	number	defaultBackStackNow	The time visits are measured from ("2 min ago"), ms since the epoch — never read from the clock during render.
labelMode	"hover" \| "always" \| "tip"	"hover"	How Back names where it leads: a chip that slides out on hover or keyboard focus, a label it always carries (cross-sliding as it changes), or a tooltip with the shortcut.
stackStyle	"list" \| "cards" \| "rail"	"list"	How the dropped history reads: plain rows, cards that deal down from a pile, or a timeline rail with the pages ahead on a dashed segment.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	The current entry, the hold bar and the related links: a named accent or any CSS colour.
product	string	"Waylight Help"	The product the header belongs to; the accessible name of the piece.
onSearch	() => void	—	Shows a Search help button at the right that calls this.
status	"ready" \| "loading" \| "error"	"ready"	Page state: loading shows a skeleton page, error offers Retry. The header keeps working.
onRetry	() => void	—	Called by the error state's Retry button.
disabled	boolean	false	Turns the header and the links off.
className	string	—	Classes for the outer section.