Engram

Artifact perk

component

A seasonal-artifact perk tile — one square cell of the in-game artifact grid: teal-filled when the perk is active, teal-outlined when it's unlocked but unpicked, and dimmed while its tier is still locked.

Install

npx shadcn@latest add @engram/artifact-perk

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

Example

Props

PropTypeDefaultDescription
iconImageRefThe perk glyph (the perk item definition's icon).
name*stringPerk name — the accessible label.
stateArtifactPerkState"unlocked"`active` = picked (teal fill), `unlocked` = available (teal outline), `locked` = not yet reachable (dimmed).
sizenumber48Pixel size (square).
popupReactNodeInspect content revealed on hover (e.g. a ).
onPick() => voidFired on click (toggle/pick the perk).

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.