KQ-2102 · STAGE/MODE

Stage Mode

A board review frame with a presentation mode: the sidebar slides off the left edge on springs.glide, the header lifts away and the toolbar sinks on springs.snap a cascade apart, while the board, carried by one transform, scales up into the freed room on glide and the zoom readout counts up with it. On stage a pointer at an edge (or focus) peeks that chrome back on snap, and a one-time hint lands on springs.recoil. F toggles the stage, Escape leaves it, a two-finger tap toggles it on touch.

KQ-2102 · STAGE/MODE

Pricing

Plans that grow with your fleet

Every plan includes live tracking, proof of delivery and depot reports.

MonthlyYearly · save 15%

Depot£24 / van / monthUp to 20 vansStart a trial

PopularFleet£58 / van / monthUp to 120 vansStart a trial

NetworkTalk to usEvery depotBook a call

Trusted by 400 depots across the networkBasinworksFieldlineColdbrookFernworks

normal · pricing page · 4 comments · select

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/stage-mode

Props

nav: StageBoard[]; default defaultStageBoards; The boards in the sidebar (a tab bar on a phone): label, kind, comment count and pins.
page / defaultPage: string; default — / the first board; The current board id, controlled or uncontrolled.
onNavigate: (id: string) => void; default —; Fires with the board chosen from the sidebar or the tab bar.
actions: StageAction[]; default defaultStageActions; Tool buttons in the floating toolbar ({ id, label, icon }); the first starts active.
onAction: (id: string) => void; default —; Fires with the tool chosen from the toolbar.
children: React.ReactNode; default —; Drawn inside the board in place of the built-in page, at the board's design size.
boardSize: { width: number; height: number }; default { width: 640, height: 400 }; The board's design size; it is scaled to fit the room it has.
mode / defaultMode: "normal" | "stage"; default — / "normal"; Whether the chrome has stepped away, controlled or uncontrolled.
onModeChange: (mode: "normal" | "stage") => void; default —; Fires from the button, key or gesture that changed the mode.
cascade: number; default 60; Delay between the sidebar, the header and the toolbar as they step away, ms.
peekZone: number; default 24; How near an edge the pointer must come to peek that piece of chrome back, px.
accent: string; default "var(--accent-bright)"; Present, the current board, pins and the edge hints — any CSS colour.
hint: string | null; default how to leave and peek; The toast shown the first time the stage is taken; null never shows it.
onHintDismiss: () => void; default —; Fires when the one-time hint leaves.
people: string[]; default four reviewers; Reviewers shown in the header.
workspace: string; default "Waylight"; The workspace, first in the breadcrumb.
project: string; default "Q4 launch"; The project, second in the breadcrumb and the frame's name.
status: "ready" | "loading" | "error"; default "ready"; Whether the boards have arrived.
onRetry: () => void; default —; Try again was pressed after the boards failed to load.
height: number; default 520; The frame's height, px.
className: string; default —; Classes for the outer frame.

Prop	Type	Default	Description
nav	StageBoard[]	defaultStageBoards	The boards in the sidebar (a tab bar on a phone): label, kind, comment count and pins.
page / defaultPage	string	— / the first board	The current board id, controlled or uncontrolled.
onNavigate	(id: string) => void	—	Fires with the board chosen from the sidebar or the tab bar.
actions	StageAction[]	defaultStageActions	Tool buttons in the floating toolbar ({ id, label, icon }); the first starts active.
onAction	(id: string) => void	—	Fires with the tool chosen from the toolbar.
children	React.ReactNode	—	Drawn inside the board in place of the built-in page, at the board's design size.
boardSize	{ width: number; height: number }	{ width: 640, height: 400 }	The board's design size; it is scaled to fit the room it has.
mode / defaultMode	"normal" \| "stage"	— / "normal"	Whether the chrome has stepped away, controlled or uncontrolled.
onModeChange	(mode: "normal" \| "stage") => void	—	Fires from the button, key or gesture that changed the mode.
cascade	number	60	Delay between the sidebar, the header and the toolbar as they step away, ms.
peekZone	number	24	How near an edge the pointer must come to peek that piece of chrome back, px.
accent	string	"var(--accent-bright)"	Present, the current board, pins and the edge hints — any CSS colour.
hint	string \| null	how to leave and peek	The toast shown the first time the stage is taken; null never shows it.
onHintDismiss	() => void	—	Fires when the one-time hint leaves.
people	string[]	four reviewers	Reviewers shown in the header.
workspace	string	"Waylight"	The workspace, first in the breadcrumb.
project	string	"Q4 launch"	The project, second in the breadcrumb and the frame's name.
status	"ready" \| "loading" \| "error"	"ready"	Whether the boards have arrived.
onRetry	() => void	—	Try again was pressed after the boards failed to load.
height	number	520	The frame's height, px.
className	string	—	Classes for the outer frame.