React Rack Layout
The picture a data-center or instrument-chassis operator actually wants: a to-scale slot map showing what is installed where, coloured by health, with the empty U's drawn explicitly so free capacity is obvious. Click a card for its detail.
Rack R-14 · Row C
32/42U used
Installation
Props
| Prop | Type | Description |
|---|---|---|
| units | number | Total rack height in U |
| cards | RackCard[] | { startU, height, label, kind?, status?, detail?, hotSwap? } |
| title | string | Heading |
Position, height, and the gaps between
Cards are placed by startU (the bottom-most U they occupy, 1-based) and height in U, and drawn to scale — an 8U storage array is visibly four times a 2U switch. The component builds an occupancy map and renders every unoccupied U as a dashed empty slot, because "where can this new server go?" is answered by seeing the gaps, not by mental arithmetic.
status (ok, warning, fault, offline, empty) sets the status dot and border, and the header rolls the counts into a summary. hotSwap marks field-replaceable units — the ones an operator can pull without a maintenance window — which is exactly what you want to know before you touch anything. Selecting a card opens a side panel with its position, type, and free-form detail; wire that to your CMDB or DCIM record.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.