Ability slot

component

A single subclass/loadout socket — an ability, aspect, fragment, super, or class ability.

Install

npx shadcn@latest add @engram/ability-slot

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

Example

Props

Prop	Type	Default	Description
`plug`	`PlugProps`	`—`	The slotted ability/aspect/fragment; omit for an empty slot.
`empty`	`boolean`	`false`	Force the empty placeholder even without a plug.
`onPick`	`() => void`	`—`	Fired when the slot is clicked (open a picker).
`popup`	`ReactNode`	`—`	Inspect content shown on hover (e.g. a ). When set, the slot becomes the trigger of an .
`kind`	`AbilityKind`	`"ability"`	What this slot holds (used for the accessible label).
`shape`	`AbilityShape`	`"square"`	Socket shape. Square (default) holds the square ability/aspect/fragment art cleanly; `round` is for subclass nodes whose icon art is circular-friendly (square art would be cropped to the circle).
`size`	`number`	`44`	Pixel size.
`selected`	`boolean`	`false`	Highlight as selected.

Composition

pulled in on install

ability-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.