KQ-959 · CAPACITY/BAR

Capacity Bar

Used, reserved and free share one rail, each run easing its own width on glide so a filling pool reads as the free run giving ground. A threshold rides the rail as a real slider whose handle captures the pointer only after four pixels of travel, and the moment committed capacity reaches the line the overhang past it shades warn on a tween while the printed state turns to over the line. Hovering a run names it in the header reading, which cross-fades in one cell inside the component's own box; arrow keys, Page keys and Home or End move the line and name the run it now sits in.

KQ-959 · CAPACITY/BAR

within headroom

Used: 6.4 cores40.0%
Reserved: 1.2 cores7.5%
Free: 8.4 cores52.5%

Shift quiet · line 80% · within headroom

Install

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

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

Props

used: number; default —; Cores in use.
reserved: number; default —; Cores held for reservations but not running.
total: number; default —; The pool's size; the rail is this wide.
unit: string; default "cores"; Printed after every figure, and made singular when the figure is one.
threshold / defaultThreshold: number; default 0.8; Controlled or initial line, as a share of total from 0 to 1.
onThresholdChange: (value: number) => void; default —; Fires from the drag or key that moved the line, never from an effect.
onOverChange: (over: boolean) => void; default —; A settled event: committed capacity crossing the line.
onSegmentChange: (id: SegmentId | null) => void; default —; Fires as a run is hovered, or as the line enters one while the handle is held.
format: (value: number) => string; default one decimal, trailing zero trimmed; Renders every core figure, so a host changes units in one place.
label: string; default "Capacity"; Names the rail and its line for assistive technology.

Prop	Type	Default	Description
used	number	—	Cores in use.
reserved	number	—	Cores held for reservations but not running.
total	number	—	The pool's size; the rail is this wide.
unit	string	"cores"	Printed after every figure, and made singular when the figure is one.
threshold / defaultThreshold	number	0.8	Controlled or initial line, as a share of total from 0 to 1.
onThresholdChange	(value: number) => void	—	Fires from the drag or key that moved the line, never from an effect.
onOverChange	(over: boolean) => void	—	A settled event: committed capacity crossing the line.
onSegmentChange	(id: SegmentId \| null) => void	—	Fires as a run is hovered, or as the line enters one while the handle is held.
format	(value: number) => string	one decimal, trailing zero trimmed	Renders every core figure, so a host changes units in one place.
label	string	"Capacity"	Names the rail and its line for assistive technology.