Mod tray

component

A row of ModSlots with an energy-budget meter — the armor mod loadout for one piece. `used` defaults to the summed energy costs; the meter turns over-budget red when the slots exceed `capacity`.

Install

npx shadcn@latest add @engram/mod-tray

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

Example

8 / 10

Props

Prop	Type	Default	Description
`slots`*	`ModTraySlot[]`	`—`	The mod sockets in this tray.
`capacity`*	`number`	`—`	Total energy capacity of the armor piece.
`used`	`number`	`—`	Energy spent; defaults to the sum of the slots' energy costs.
`size`	`number`	`44`	Pixel size per socket.
`onPick`	`(index: number) => void`	`—`	Fired with the socket index when a socket is clicked.
`popup`	`(plug: PlugProps, index: number) => ReactNode`	`—`	Inspect content for a filled socket (e.g. a ), shown on hover — wires each socket to an .

Composition

pulled in on install

mod-traycomponent
- energy-metercomponent
- mod-slotcomponent
  - bungie-imageatom
  - item-hover-cardcomponent

Dependencies

npm

@engram/core

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.