Documentation

ItemStack

Minimal item unit: icon plus count badge.

import { ItemStack } from "./index";

/**
 * ItemStack 预览用例（规格 §5 #3）
*/
export function ItemStackDemo() {
  return (
    <div className="flex items-center gap-8">
      <ItemStack count={64} icon="stone-block" />
      <ItemStack count={1} icon="diamond" selected tooltip="钻石" />
      <ItemStack icon="apple" tooltip="苹果 · 恢复 4 饥饿" />
      <ItemStack count={3} icon="sword" selected />
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/item-stack

npm install

$pnpm add @tennantite/ui

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

Usage

npm import

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

CLI copy import

import { ItemStack } from "@/components/tennantite/item-stack";

import { ItemStack } from "./index";

/**
 * ItemStack 预览用例（规格 §5 #3）
*/
export function ItemStackDemo() {
  return (
    <div className="flex items-center gap-8">
      <ItemStack count={64} icon="stone-block" />
      <ItemStack count={1} icon="diamond" selected tooltip="钻石" />
      <ItemStack icon="apple" tooltip="苹果 · 恢复 4 饥饿" />
      <ItemStack count={3} icon="sword" selected />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
bare	boolean	false	Skip drawing the slot texture (provided by the parent container).
className	string	—	Additional class name appended to the root element.
count	number	—	Stack count (shows a count badge when > 1, spec §5 #3).
icon	Parameters<typeof Icon>[0]["name"]	—	Built-in pixel icon name (mutually exclusive with src).
selected	boolean	false	Selected state (1 GUI px white inner frame).
size	number	18	Slot size in GUI px (default 18 — vanilla slot).
src	string	—	Custom icon URL.
style	CSSProperties	—	Slot style (absolute positioning, etc.).
tooltip	ReactNode	—	Tooltip content (wraps in a Tooltip when provided, interaction hydrated on the client).

Source

packages/ui/src/containers/item-stack/index.tsx

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