ComputeStatus

A compact compute readout — lifecycle state, autoscaling CU size, and scale-to-zero — in the house status vocabulary.

ComputeStatus is the one-line readout for a Neon compute: a square status dot, the state word, the autoscaling size, and the scale-to-zero setting, each fenced off by a hairline. Color lives only in the dot, from the house status vocabulary — active green, scaling amber, sleeping gray. The two alive states breathe on the shared 2.6s cadence and hold steady under reduced motion; suspended dims the whole line, because the compute is off. It drops into a workspace header, a connection panel, or a settings row.

States

active and scaling are alive and breathe; idle sits up but quiet; suspended has scaled to zero and holds still.

Install

npx shadcn@latest add https://ui.neon.com/r/compute-status.json

Usage

import { ComputeStatus } from "@/components/neon-ui/compute-status";

<ComputeStatus
  state="active"
  cu={[0.25, 2]}
  scaleToZero="scales to zero after 5m"
/>;

Pass variant="panel" to wrap the row in the house card surface; the default inline renders it naked for a header or toolbar.

Wiring to Neon

A server component reads the branch’s read-write endpoint and maps Neon’s init/active/idle states onto the readout, with the autoscaling range and suspend timeout alongside:

import { createNeonClient } from "@/lib/neon-client";

const neon = createNeonClient(process.env.NEON_API_KEY);
const { data: endpoints } = await neon.postgres.endpoints.listByBranch(
  projectId,
  branchId
);
const endpoint = endpoints?.find((item) => item.type === "read_write");

init (or a pending active) reads as scaling, idle as suspended, everything else as active.

Props

Accessibility

Color never stands alone: the dot pairs with the state word, and the size and scale-to-zero stay as text, so the readout survives without it. The breathing dot honors reduced-motion, settling to a steady fill. Wrap it in your own live region when a state change must be announced.