Engram

Stat popup

component

The character-stat inspect tooltip — the in-game flyout for the six stats (Weapons/Health/Class/Grenade/Super/Melee): a black header band (stat glyph, large name, "Character Stat" caption), the stat's description, labeled effect readouts ("Health Per Orb" / "+62.3"), the gold "Enhanced Benefit" section that unlocks above 100, and a value/max progress footer with a threshold tick at 100.

Install

npx shadcn@latest add @engram/stat-popup

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

Example

Health

Character Stat

Increases the amount of health you gain each time you pick up an Orb of Power. Reduces flinching from incoming fire while aiming a weapon.

Health Per Orb+62.3
Flinch Resistance+8.9%

Enhanced Benefit

Your shields recharge more quickly and have additional health when facing combatants.

Activates above Stat Level 100.

89/200

Props

PropTypeDefaultDescription
classNamestring——
name*string——
subtitlestring"Character Stat"Header caption under the name (e.g. "Character Stat", the default).
iconImageRef—The stat glyph — the DestinyStatDefinition icon.
descriptionstring—What the stat does — the stat definition's description.
rowsStatPopupRow[]—Labeled effect readouts computed from the stat value, e.g. "Health Per Orb" + "+62.3".
enhanced{ /** Section heading (defaults to "Enhanced Benefit"). */ heading?: string; description: string; /** Unlock condition line, e.g. "Activates above Stat Level 100." */ activation?: string; /** Effect readouts for points 101-200, present once the stat is above * 100 (e.g. "Melee Damage (PvE)" + "+15%"). */ rows?: StatPopupRow[]; }—The above-100 benefit section.
value*number—Current stat value — fills the footer bar.
maxnumber200Footer bar maximum (defaults to 200, the in-game cap). A threshold tick marks 100 — where the enhanced benefit activates.

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.