Documentation

PlayerInventory

Reusable 3×9 main inventory plus 1×9 hotbar block.

物品栏

import { ScreenPanel } from "../screen-panel/index";
import { PlayerInventory } from "./index";

export function PlayerInventoryDemo() {
  return (
    <ScreenPanel height={166} title="物品栏" width={176}>
      <PlayerInventory
        hotbarItems={[
          { count: 64, icon: "stone-block" },
          { icon: "grass-block" },
          { count: 12, icon: "diamond" },
        ]}
        mainItems={[
          { count: 64, icon: "stone-block" },
          { count: 32, icon: "dirt-block" },
          null,
          { icon: "sword" },
        ]}
        selectedIndex={1}
      />
    </ScreenPanel>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/player-inventory

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

import { PlayerInventory } from "@tennantite/ui";

CLI copy import

import { PlayerInventory } from "@/components/tennantite/player-inventory";

import { ScreenPanel } from "../screen-panel/index";
import { PlayerInventory } from "./index";

export function PlayerInventoryDemo() {
  return (
    <ScreenPanel height={166} title="物品栏" width={176}>
      <PlayerInventory
        hotbarItems={[
          { count: 64, icon: "stone-block" },
          { icon: "grass-block" },
          { count: 12, icon: "diamond" },
        ]}
        mainItems={[
          { count: 64, icon: "stone-block" },
          { count: 32, icon: "dirt-block" },
          null,
          { icon: "sword" },
        ]}
        selectedIndex={1}
      />
    </ScreenPanel>
  );
}

API Reference

Prop	Type	Default	Description
bare	boolean	false	Skip drawing slot frames (container background already has them baked in).
className	string	—	Additional class name appended to the root element.
frameClassName	string	—	Custom slot frame texture class (defaults to vanilla `mc-tex-slot`).
hotbarItems	(InventoryItem \| null \| undefined)[]	[]	The 9 hotbar slots.
hotbarY	number	141	Hotbar slot y position in GUI px (default 141).
mainItems	(InventoryItem \| null \| undefined)[]	[]	Main inventory items (row-major, default 3×9).
mainRows	number	3	Number of main inventory rows (default 3).
onSlotClick	(area: "hotbar" \| "main", index: number) => void	—	Slot click callback.
selectedIndex	number	—	Selected hotbar index.
x	number	7	Slot origin x in GUI px (default 7).
y	number	83	Main inventory slot origin y in GUI px (default 83).

Source

packages/ui/src/containers/player-inventory/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.