Documentation

HealthHungerBar

Health / hunger / armor / oxygen status bar.

import { HealthHungerBar } from "./index";

/**
 * HealthHungerBar 预览用例（规格 §6.1）
*/
export function HealthHungerBarDemo() {
  return (
    <div className="flex flex-col gap-12">
      <HealthHungerBar health={20} hunger={17} />
      <HealthHungerBar armor={13} health={7} hunger={9} oxygen={6} />
      <HealthHungerBar health={1} hunger={0} />
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/health-hunger-bar

npm install

$pnpm add @tennantite/ui

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

Source

packages/ui/src/screens/hud/health-hunger-bar/index.tsx

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