Player card
componentAn 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-cardRegistry 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 propsFetch 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
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | — | — |
emblem* | EmblemRef | — | — |
class | GuardianClass | — | Guardian class — shows the class glyph beside the name. |
subtitle | ReactNode | — | Secondary line (Bungie code "#1234", platform, last-seen…). |
rank | ReactNode | — | Right-aligned slot — a rank/glory badge, fireteam role, or action. |
stats | ReactNode | — | Stats row rendered along the bottom (e.g. K/D, wins). |
banner | boolean | false | Use the wide emblem-banner art as the row background (the in-game PGCR / scoreboard / fireteam row) instead of the small square icon. |
power | number | — | Light level shown as a gold ◆ readout (banner rows). |
accent | string | "var(--engram-accent)" | Accent color for the banner's bottom progress edge (team/emblem color). |
progress | number | — | Banner fill 0–1 — the thin progress edge under the name. |
height | number | 56 | Pixel height of the banner row. Default 56. |
Composition
pulled in on install- player-cardcomponent
- bungie-imageatom
- emblem-bannercomponent
- power-badgecomponent
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.