Documentation

ScreenPanel

Absolute-coordinate base sized in vanilla container dimensions (GUI px).

容器面板

176×166 GUI px

import { gui } from "../../lib/utils";
import { Slot } from "../slot/index";
import { ScreenPanel } from "./index";

export function ScreenPanelDemo() {
  return (
    <ScreenPanel height={166} title="容器面板" width={176}>
      <p
        className="absolute font-mc mc-text"
        style={{ left: gui(8), top: gui(24) }}
      >
        176×166 GUI px
      </p>
      <Slot className="absolute" style={{ left: gui(8), top: gui(40) }} />
      <Slot
        className="absolute"
        selected
        style={{ left: gui(26), top: gui(40) }}
      />
    </ScreenPanel>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/screen-panel

npm install

$pnpm add @tennantite/ui

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

Usage

npm import

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

CLI copy import

import { ScreenPanel } from "@/components/tennantite/screen-panel";

import { gui } from "../../lib/utils";
import { Slot } from "../slot/index";
import { ScreenPanel } from "./index";

export function ScreenPanelDemo() {
  return (
    <ScreenPanel height={166} title="容器面板" width={176}>
      <p
        className="absolute font-mc mc-text"
        style={{ left: gui(8), top: gui(24) }}
      >
        176×166 GUI px
      </p>
      <Slot className="absolute" style={{ left: gui(8), top: gui(40) }} />
      <Slot
        className="absolute"
        selected
        style={{ left: gui(26), top: gui(40) }}
      />
    </ScreenPanel>
  );
}

API Reference

Prop	Type	Default	Description
background	GuiSpriteName	—	Vanilla container background sprite (e.g. `container/inventory.png`).
backgroundClassName	string	"mc-tex-panel"	CSS texture class for non-sprite backgrounds (e.g. IC2 replica `.mc-tex-ic2-machine`); replaces the default `.mc-tex-panel` fallback when `background` is unset.
backgroundSlice	number \| { bottom: number; left: number; right: number; top: number }	—	Background nine-slice values (source PNG px).
backgroundSrc	GuiSpriteRect	—	Background crop region; defaults to the full image.
backgroundTile	boolean	—	Tile the background.
height	number	—	Panel height in GUI px (vanilla container screen is 166).
title	ReactNode	—	Window title (rendered at the vanilla title position (8, 6)).
width	number	—	Panel width in GUI px (vanilla container screen is 176).

Source

packages/ui/src/containers/screen-panel/index.tsx

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