Item tile

component

A full item tile: the layered ItemImage with a bottom element+power foot, and the signature Destiny white outline on hover.

Install

npx shadcn@latest add @engram/item-tile

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

Example

510

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
`size`	`number`	`48`	Pixel size (square).
`topLeft`	`ReactNode`	`—`	Status badge composited into the top-left corner (e.g. a tag dot).
`topRight`	`ReactNode`	`—`	Status badge in the top-right corner (e.g. lock / tracked / "new").
`bottomLeft`	`ReactNode`	`—`	Status badge in the bottom-left corner (the foot holds element+power).
`progress`	`number`	`—`	Completion progress 0–1 — a thin bar pinned across the bottom edge.
`progressColor`	`string`	`"var(--engram-accent)"`	Color for the progress bar fill. Defaults to the accent token.
`icon`*	`ImageRef`	`—`	—
`name`*	`string`	`—`	—
`rarity`*	`Rarity`	`—`	—
`watermark`	`ImageRef`	`—`	Season watermark / crest glyph.
`tier`	`number`	`—`	Gear tier (1–5) — rendered as tier-1 diamonds.
`intrinsicIcon`	`ImageRef`	`—`	Intrinsic glyph — weapon frame or armor archetype — shown top-right.
`masterwork`	`boolean`	`—`	Masterworked — the bright gold frame + glow.
`crafted`	`boolean`	`—`	A crafted ("Shaped") weapon — shows the red crafted glyph in the bottom-left corner (no border).
`deepsight`	`boolean`	`—`	Deepsight Resonance — an extractable red-border weapon; draws the red frame + rising red glow. Distinct from .
`power`	`number`	`—`	Power / light level.
`ammo`	`AmmoType`	`—`	—
`element`	`ElementType`	`—`	—

Composition

pulled in on install

item-tilecomponent
- 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.