KQ-1649 · RACK/ELEVATION

Rack Elevation

A rack elevation drawn from data: each rack front-on with rails and U numbers, each host a slim drawer with power, network and health lights, its temperature and a load meter, and every free unit a dashed slot. Selecting a host slides its drawer out on its rails on springs.glide, heavy and damped and carrying the throw's velocity when it is pulled by hand, while the slot it left shows dark between two rails, a shadow grows with the pull, its tray unrolls toward the side with room and every other unit dims; an alert flashes only the one light it belongs to. The elevation is one tab stop: Up and Down walk units, Left and Right cross racks to the unit at the nearest height, Enter opens, Escape closes, and Reboot asks for a second press.

KQ-1649 · RACK/ELEVATION

Basin Hall · row 3

3 racks · 23 hosts · 5.6 kW

1 alert

3 racks · 23 hosts · 1 alert

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/rack-elevation

Props

rackCount: number; default 3; How many racks are drawn side by side (stacked when narrow), from the start of racks.
ledStyle: "dot" | "pipe" | "ring"; default "dot"; How a status light is drawn: a round lamp, a slim light pipe or a hollow ring.
tone: "graphite" | "steel" | "sand"; default "graphite"; The rack's metal, mixed from theme tokens so it reads in both themes.
racks: RackSpec[]; default defaultRacks; The racks: { id, name, units, hosts }, each host { id, name, role, u, size, state, address, temp, load, power, uptime, drained?, alert? }.
selected / defaultSelected: string | null; default — / null; The open host id, controlled or initial.
onSelect: (host: RackHost | null) => void; default —; Fires from the press, key or pull that opened or closed a drawer.
onDrain: (host: RackHost, drained: boolean) => void; default —; Drain or Undrain was pressed, with the host's new drained state.
onReboot: (host: RackHost) => void; default —; A reboot was confirmed with the second press of Reboot.
status: "ready" | "loading" | "error"; default "ready"; Loading draws outline units in each rack; error offers Retry.
onRetry: () => void; default —; Retry was pressed after the racks failed to load.
unitHeight: number; default 22; Height of one rack unit in px.
pull: number; default 14; How far a drawer slides out on its rails, in px.
tempLimit: number; default 48; Temperatures at or above this (°C) are drawn as warnings.
blink: boolean; default true; Let an alert's light flash; it only does while its rack is on screen and the page is visible.
title: string; default "Basin Hall · row 3"; The room or row over the racks, and the surface's accessible name.
height: number; default 540; Height of the surface in px; the racks scroll inside it.
disabled: boolean; default false; Nothing opens, drains or reboots; the surface dims.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
rackCount	number	3	How many racks are drawn side by side (stacked when narrow), from the start of racks.
ledStyle	"dot" \| "pipe" \| "ring"	"dot"	How a status light is drawn: a round lamp, a slim light pipe or a hollow ring.
tone	"graphite" \| "steel" \| "sand"	"graphite"	The rack's metal, mixed from theme tokens so it reads in both themes.
racks	RackSpec[]	defaultRacks	The racks: { id, name, units, hosts }, each host { id, name, role, u, size, state, address, temp, load, power, uptime, drained?, alert? }.
selected / defaultSelected	string \| null	— / null	The open host id, controlled or initial.
onSelect	(host: RackHost \| null) => void	—	Fires from the press, key or pull that opened or closed a drawer.
onDrain	(host: RackHost, drained: boolean) => void	—	Drain or Undrain was pressed, with the host's new drained state.
onReboot	(host: RackHost) => void	—	A reboot was confirmed with the second press of Reboot.
status	"ready" \| "loading" \| "error"	"ready"	Loading draws outline units in each rack; error offers Retry.
onRetry	() => void	—	Retry was pressed after the racks failed to load.
unitHeight	number	22	Height of one rack unit in px.
pull	number	14	How far a drawer slides out on its rails, in px.
tempLimit	number	48	Temperatures at or above this (°C) are drawn as warnings.
blink	boolean	true	Let an alert's light flash; it only does while its rack is on screen and the page is visible.
title	string	"Basin Hall · row 3"	The room or row over the racks, and the surface's accessible name.
height	number	540	Height of the surface in px; the racks scroll inside it.
disabled	boolean	false	Nothing opens, drains or reboots; the surface dims.
className	string	—	Classes for the outer surface.