Item image

component

The layered Destiny item square: rarity-colored base, the item art, the season/tier watermark assembly (TierWatermark), the intrinsic glyph, then state chrome (masterwork frame + glow, crafted marker).

Install

npx shadcn@latest add @engram/item-image

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

Example

Bungie API

source the props

Fetch the data with @engram/api (a typed bungie-api-ts client) and map it to this component's props with @engram/core. This is the exact code the docs' live examples run.

/** Build ItemTile props from a manifest item definition (by hash). `getDef` is
 *  any sync manifest lookup — a local store, or a request-scoped cache. */
export function itemTileFromDefinition(
  getDef: GetDefinition,
  hash: number,
): ItemTileProps | null {
  const def = getDef<DestinyInventoryItemDefinition>(
    "DestinyInventoryItemDefinition",
    hash,
  );
  if (!def?.displayProperties?.name) return null;
  return { ...toItemTileProps(def), watermark: seasonCrest(getDef, def) };
}

Props

Prop	Type	Default	Description
`icon`*	`ImageRef`	`—`	—
`rarity`*	`Rarity`	`—`	—
`watermark`	`ImageRef`	`—`	Clean season glyph (secondaryBackground) for the tier-watermark assembly.
`tier`	`number`	`—`	Gear tier (1–5) — drives the diamond count.
`intrinsicIcon`	`ImageRef`	`—`	Intrinsic glyph — weapon frame or armor archetype — shown top-right.
`masterwork`	`boolean`	`—`	—
`crafted`	`boolean`	`—`	A crafted ("Shaped") weapon — the red crafted glyph, bottom-left.
`deepsight`	`boolean`	`—`	Deepsight Resonance — the red border + rising glow.
`size`	`number`	`48`	Pixel size (square).

Composition

pulled in on install

item-imagecomponent
- bungie-imageatom
- tier-watermarkcomponent

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.