Engram

Player card

component

An identity card. The default is a compact tile (square emblem + name + class + rank + stats) for search results and fireteam lists.

Install

npx shadcn@latest add @engram/player-card

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

Example

code0100fun#4431
Iron Lord
Mythic
K/D1.84Wins312Power507

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.

/** The profile components a gear + character render needs (Characters,
 *  CharacterEquipment, and the equipped items' Instances/Stats/Sockets/Plugs). */
export const PROFILE_COMPONENTS = [
  200, 205, 300, 304, 305, 310,
] as DestinyComponentType[];

/** Resolve a Bungie name → membership, then fetch that profile. Returns a
 *  bungie-api-ts DestinyProfileResponse. */
export async function fetchProfile(
  client: BungieClient,
  bungieName: string,
  components: DestinyComponentType[] = PROFILE_COMPONENTS,
): Promise<DestinyProfileResponse> {
  const memberships = await client.searchByBungieName(bungieName);
  const membership = memberships.find((m) => m.membershipId) ?? memberships[0];
  if (!membership) throw new Error(`No Destiny profile for "${bungieName}"`);
  return client.getProfile(
    membership.membershipType,
    membership.membershipId,
    components,
  );
}

Props

PropTypeDefaultDescription
name*string
emblem*EmblemRef
classGuardianClassGuardian class — shows the class glyph beside the name.
subtitleReactNodeSecondary line (Bungie code "#1234", platform, last-seen…).
rankReactNodeRight-aligned slot — a rank/glory badge, fireteam role, or action.
statsReactNodeStats row rendered along the bottom (e.g. K/D, wins).
bannerbooleanfalseUse the wide emblem-banner art as the row background (the in-game PGCR / scoreboard / fireteam row) instead of the small square icon.
powernumberLight level shown as a gold ◆ readout (banner rows).
accentstring"var(--engram-accent)"Accent color for the banner's bottom progress edge (team/emblem color).
progressnumberBanner fill 0–1 — the thin progress edge under the name.
heightnumber56Pixel height of the banner row. Default 56.

Composition

pulled in on install

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.