Plug
componentA single socket plug — a perk circle or a mod square. A selected perk gets the in-game azure fill (blue→gold when enhanced, with the gold ▲ badge); a selected mod keeps the bright ring.
Install
npx shadcn@latest add @engram/plugRegistry item: /r/plug.json — the machine-readable definition agents install from.
Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
kind | "perk" | "mod" | "perk" | Perks render as circles, mods as squares. |
size | number | 36 | Pixel size. |
badge | ReactNode | — | Overlay slot (e.g. a curated-roll badge) — the extension hook. |
hash* | number | — | Plug item hash. |
name* | string | — | — |
icon | ImageRef | — | — |
enabled | boolean | — | Whether the plug is currently active/usable. |
selected | boolean | — | Whether this plug is the one currently inserted in the socket. |
enhanced | boolean | — | An enhanced weapon trait — renders the gold ▲ badge and the blue→gold enhanced fill (the in-game "this perk is enhanced" treatment). |
backing | boolean | — | Render a neutral gray card backing behind the icon — for plugs whose art has a transparent background (e.g. armor tuning mods) that would otherwise look inconsistent beside mods that bake their own gray card. |
Composition
pulled in on install- plugcomponent
- 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.