KQ-1729 · INSTANCE/SIZER

Instance Sizer

A provisioning wizard — region, size, add-ons, summary — beside a small server rack and the monthly estimate. Choosing a size grows or shrinks the rack unit by unit: new sleds slide in from the right bottom-up on springs.snap a cascade apart, each status light blinking on springs.flick as it seats, and a smaller size pulls the extra sleds out top-down on the exit ease; add-ons take fixed slots or light the roof beacon, the estimate rolls digit by digit on snap in the direction the total moved, and provisioning sweeps every light to green. Every choice is a radio card with roving focus — arrows move and select, skipping sizes a region does not offer, whose reasons are shown and read out.

KQ-1729 · INSTANCE/SIZER

New environment

Gaugeworks · telemetry-prod

Monthly estimate/ moMedium · Harbour North

How big should it be?

Medium · Harbour North · 1 add-on · $82.00 / mo

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/instance-sizer

Props

regions: InstanceSizerRegion[]; default defaultInstanceSizerRegions; Where it can run: { id, name, code, latency?, factor } — factor multiplies the size's list price.
sizes: InstanceSizerSize[]; default defaultInstanceSizerSizes; Server sizes: { id, name, cpu, memory, units, price, tag?, unavailable? } — unavailable maps a region id to the reason.
addons: InstanceSizerAddon[]; default defaultInstanceSizerAddons; Extras: { id, name, description, price, part } — part is storage, backup, network or beacon.
value / defaultValue: InstanceSizerConfig; default — / defaultInstanceSizerConfig; { region, size, addons }, controlled or initial.
onValueChange: (config) => void; default —; Fires from the card, switch or key that changed the configuration.
step / defaultStep: "region" | "size" | "addons" | "summary"; default — / "region"; The current step, controlled or initial.
onStepChange: (step) => void; default —; Fires from Next, Back, the stepper or a Change link with the step asked for.
onProvision: (config, monthly) => void; default —; Fires from Provision with the configuration and its monthly estimate.
rackStyle: "line" | "solid" | "plan"; default "line"; The rack as a hairline drawing, solid metal faces, or a dashed plan on a grid.
density: "compact" | "regular" | "roomy"; default "regular"; Card padding and type size.
accent: string; default "var(--accent-bright)"; Rings, lights, the estimate's rules and Provision — any CSS colour.
rackUnits: number; default 12; The cabinet's height in rack units, 10 to 20.
format: (amount: number) => string; default US dollars with cents; Formats every amount; the estimate's digits roll whatever the format.
environment: string; default "telemetry-prod"; The environment's name, in the header and summary.
title: string; default "New environment"; The wizard's heading.
status: "ready" | "loading" | "error"; default "ready"; Loading shows placeholder cards; error explains and offers Try again.
onRetry: () => void; default —; Try again was pressed after the catalogue failed to load.
height: number; default 540; Height of the surface in px; the step body scrolls inside it.
disabled: boolean; default false; Read only: nothing can be chosen or provisioned.
className: string; default —; Classes for the surface.

Prop	Type	Default	Description
regions	InstanceSizerRegion[]	defaultInstanceSizerRegions	Where it can run: { id, name, code, latency?, factor } — factor multiplies the size's list price.
sizes	InstanceSizerSize[]	defaultInstanceSizerSizes	Server sizes: { id, name, cpu, memory, units, price, tag?, unavailable? } — unavailable maps a region id to the reason.
addons	InstanceSizerAddon[]	defaultInstanceSizerAddons	Extras: { id, name, description, price, part } — part is storage, backup, network or beacon.
value / defaultValue	InstanceSizerConfig	— / defaultInstanceSizerConfig	{ region, size, addons }, controlled or initial.
onValueChange	(config) => void	—	Fires from the card, switch or key that changed the configuration.
step / defaultStep	"region" \| "size" \| "addons" \| "summary"	— / "region"	The current step, controlled or initial.
onStepChange	(step) => void	—	Fires from Next, Back, the stepper or a Change link with the step asked for.
onProvision	(config, monthly) => void	—	Fires from Provision with the configuration and its monthly estimate.
rackStyle	"line" \| "solid" \| "plan"	"line"	The rack as a hairline drawing, solid metal faces, or a dashed plan on a grid.
density	"compact" \| "regular" \| "roomy"	"regular"	Card padding and type size.
accent	string	"var(--accent-bright)"	Rings, lights, the estimate's rules and Provision — any CSS colour.
rackUnits	number	12	The cabinet's height in rack units, 10 to 20.
format	(amount: number) => string	US dollars with cents	Formats every amount; the estimate's digits roll whatever the format.
environment	string	"telemetry-prod"	The environment's name, in the header and summary.
title	string	"New environment"	The wizard's heading.
status	"ready" \| "loading" \| "error"	"ready"	Loading shows placeholder cards; error explains and offers Try again.
onRetry	() => void	—	Try again was pressed after the catalogue failed to load.
height	number	540	Height of the surface in px; the step body scrolls inside it.
disabled	boolean	false	Read only: nothing can be chosen or provisioned.
className	string	—	Classes for the surface.