Nameplate
componentA character/player nameplate (DIM model): the emblem banner sized to its own aspect ratio, with the name + subtitle over the dark band and a small gold power readout tucked into the top-right corner.
Install
npx shadcn@latest add @engram/nameplateRegistry item: /r/nameplate.json — the machine-readable definition agents install from.
Example
Hunter
Iron LordExo
507
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 |
|---|---|---|---|
height | number | 84 | Pixel height. |
name* | string | — | — |
emblem* | EmblemRef | — | — |
class | GuardianClass | — | — |
subtitle | string | — | Secondary line under the name (e.g. the race, "Exo"). Falls back to the class name when omitted. |
title | string | — | Equipped Seal title (e.g. "Conqueror") — shown in gold before the subtitle. |
power | number | — | — |
Composition
pulled in on install- nameplatecomponent
- emblem-bannercomponent
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.