Get started

Engram ships as a shadcn registry — shadcn add copies a component's source into your repo, so you own and can edit it. Point shadcn at the @engram namespace once, then install components by name.

1 · Configure the registry

components.json

Add the @engram namespace to your project's components.json:

{
  "registries": {
    "@engram": "https://engram.starside.ai/r/{name}.json"
  }
}

2 · Add components

npx shadcn add

# Add a component — its deps (tokens theme, @engram/core) come too.
npx shadcn@latest add @engram/item-tile

# Add several at once
npx shadcn@latest add @engram/nameplate @engram/item-popup @engram/socket-grid

Each component pulls in its dependencies automatically — the tokens theme (the --engram-* CSS variables) and @engram/core (the framework-neutral Bungie-API → props mapping, on npm). Every component page lists its own install command and dependencies.

3 · Import the theme

@engram/tokens

Components read Destiny's palette from CSS variables. Import the theme once in your global stylesheet (it defines both the darkness and light modes):

/* app/globals.css — after your Tailwind import */
@import "@engram/tokens/theme.css";

4 · Render

own the code

import { ItemTile } from "@/components/engram/item-tile";

<ItemTile
  icon={{ path: "/common/destiny2_content/icons/…" }}
  name="Fatebringer"
  rarity="legendary"
  power={2010}
  element="solar"
/>;

Need the props from live Bungie data? Each data-driven component page shows the exact typed @engram/api + @engram/core call that produces them.

For agents

MCP · llms.txt

The registry is agent-consumable. Point the shadcn MCP server at it to browse, search, and install by name, or read the machine-readable index of every component (grouped, with descriptions and install ids):

/llms.txt /llms-full.txt Browse 66 components