@arcade-alley/cosmetic-render

Shared cosmetic render primitives + surface compositions for Arcade Alley — the single source of truth for how cosmetics render across the Cosmetic Hub, the platform shell, and the game SDK (loading / pause / end chrome).

Internal Arcade Alley package. 0.x — API is stable to build against but pre-1.0 (additive changes during 0.x; breaking changes get a major bump). Pin ~0.1.x.

Install

npm install @arcade-alley/cosmetic-render

Peer deps: react >=19, react-dom >=19.

Ships TypeScript source (no build step). Consumers must transpile it:

• Next.js: add to next.config:

  transpilePackages: ['@arcade-alley/cosmetic-render']

• Other bundlers: ensure the package is included in your TS/JSX transform.

API

Tokens/types: RARITY_TOKENS, RARITIES, Rarity, NameColorValue, CosmeticRenderData, EquippedLoadout.

Primitives: RarityFrame, NameColor, Avatar, Banner, Frame, Badge, BadgeRow, Title, EmoteSet, Charm.

Surface compositions: ProfileHeader, LeaderboardRow, LoadoutShowcase, PrizeWallCard, GameChip.

Game SDK chrome

Render a player's identity in a game's loading/pause/end card:

import { GameChip, type EquippedLoadout } from '@arcade-alley/cosmetic-render'

<GameChip loadout={equippedLoadout} />

Pass an EquippedLoadout (handle + equipped cosmetics per slot). Asset URLs are pre-resolved by the caller (the renderer never touches storage keys). Missing art falls back to placeholders — never blocks render.