Record card
componentA triumph / record card (the in-game Triumphs & Seals grid): a circular record icon + title, a divider, an objective description, a right-aligned reward or completion check, and a thin progress edge — continuous or `steps` segments.
Install
npx shadcn@latest add @engram/record-cardRegistry item: /r/record-card.json — the machine-readable definition agents install from.
Example
Flawless
Win seven Trials matches without a loss.
Sherpa
Guide a new player through a raid.
Cartographer
Discover every region on the map.
Sword Logic
Defeat 500 enemies with swords.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | ReactNode | — | — |
description | ReactNode | — | The objective summary line. |
icon | ImageRef | — | Triumph/record icon (rendered in a circular frame, in-game style). |
complete | boolean | false | Completed → gold check + gold-tinted card and a gold (full) progress edge. |
progress | number | — | Progress 0–1 for the bottom edge. Omit for a boolean triumph (no bar). White-ish while in progress, gold when `complete`. |
steps | number | — | Discrete part count — when set, the bottom edge renders as `steps` segments (e.g. "collect all 7") instead of a continuous bar. |
reward | ReactNode | — | Right-aligned reward / score slot (overrides the completion check). |
Composition
pulled in on install- record-cardcomponent
- bungie-imageatom
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.