Documentation

Slot

Beveled item slot with an optional white selection frame.

import { Grid } from "../grid/index";
import { Icon } from "../icon/index";
import { Slot } from "./index";

/**
 * Slot / Grid 预览用例（规格 §5 #2）
*/
export function SlotDemo() {
  return (
    <div className="mc-tex-panel inline-block p-6">
      <Grid columns={4}>
        <Slot selected>
          <Icon name="grass-block" />
        </Slot>
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
      </Grid>
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/slot

npm install

$pnpm add @tennantite/ui

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

Usage

npm import

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

CLI copy import

import { Slot } from "@/components/tennantite/slot";

import { Grid } from "../grid/index";
import { Icon } from "../icon/index";
import { Slot } from "./index";

/**
 * Slot / Grid 预览用例（规格 §5 #2）
*/
export function SlotDemo() {
  return (
    <div className="mc-tex-panel inline-block p-6">
      <Grid columns={4}>
        <Slot selected>
          <Icon name="grass-block" />
        </Slot>
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
      </Grid>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
bare	boolean	false	Skip drawing the slot texture (for containers like HUD hotbars that ship their own).
frameClassName	string	"mc-tex-slot"	Custom slot frame texture class (default `mc-tex-slot`; mod screens may pass their own).
ghost	GuiSpriteName	—	Ghost sprite for empty slots.
selected	boolean	false	Selected state: 1 GUI px white inner frame.
size	number	18	Edge length in GUI px (default 18 — vanilla slot).

Source

packages/ui/src/containers/slot/index.tsx

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