Energy meter

component

The armor energy capacity readout: a row of pips where `used` are filled, the rest of `total` are empty sockets, and any headroom up to `max` shows as faint upgrade ghosts.

Install

npx shadcn@latest add @engram/energy-meter

Registry item: /r/energy-meter.json — the machine-readable definition agents install from.

Example

Props

Prop	Type	Default	Description
`used`*	`number`	`—`	Energy points spent (filled pips).
`total`*	`number`	`—`	Current capacity (filled + empty pips).
`max`	`number`	`—`	Upgradeable ceiling — pips between `total` and `max` render as faint ghosts to show remaining headroom. Defaults to `total` (no ghosts).
`size`	`number`	`10`	Pip diameter (px). Default 10.
`color`	`string`	`"var(--engram-accent)"`	Pip fill color (the energy affinity). Defaults to the accent token.

Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.