Socket

component

One socket: a perk column (stacked circles) or a mod socket (squares).

Install

npx shadcn@latest add @engram/socket

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

Example

Props

Prop	Type	Default	Description
`className`	`string`	`—`	—
`plugSize`	`number`	`—`	Pixel size for this socket's plugs.
`annotations`	`Record<number, PlugAnnotation>`	`—`	Typed curated-roll annotations keyed by plug hash (rendered as default badges).
`renderBadge`	`(plug: PlugData) => ReactNode`	`—`	Fully override the badge for a plug (takes precedence over `annotations`).
`onPlugClick`	`(plug: PlugData) => void`	`—`	Called when a plug is clicked.
`plugPopup`	`(plug: PlugData) => ReactNode`	`—`	A plug's inspect popup (e.g. a ). When it returns a node, the plug reveals it on hover beside the parent inspect panel — the in-game "hover a mod to read it" detail. Return `null` for plugs with no inspect.
`index`*	`number`	`—`	Socket index on the item.
`kind`*	`"perk" \| "mod"`	`—`	Perk columns render as circles; mod sockets render as squares.
`plugs`*	`PlugProps[]`	`—`	—

Composition

pulled in on install

socketcomponent
- item-hover-cardcomponent
- plugcomponent
  - bungie-imageatom
- plug-badgecomponent

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.