Loadout card

component

A compact build summary: the subclass diamond + name, the equipped item tiles, an optional mod row, the stat tiers, and an action footer.

Install

npx shadcn@latest add @engram/loadout-card

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

Example

Solar Hunter

506

503

444

Props

Prop	Type	Default	Description
`name`	`ReactNode`	`—`	Build name / title.
`subclass`	`LoadoutSubclass`	`—`	Subclass shown as a diamond beside the name.
`items`	`ItemTileData[]`	`—`	Equipped weapons + armor as tiles.
`mods`	`PlugProps[]`	`—`	Mod icons shown in a compact row.
`stats`	`CharacterStatItem[]`	`—`	Stat block (tiers).
`footer`	`ReactNode`	`—`	Action row (Equip / Share / Edit).

Composition

pulled in on install

loadout-cardcomponent
- character-statscomponent
  - bungie-imageatom
  - item-hover-cardcomponent
  - stat-popupcomponent
    - panelatom
- item-tilecomponent
  - item-imagecomponent
    - tier-watermarkcomponent
- plugcomponent
- subclass-diamondcomponent

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.