Documentation

BossBar

Boss bar with purple title and health bar (overlay semantics).

凋灵

末影龙

import { BossBar } from "./index";

/**
 * BossBar 预览用例（规格 §6.1）
*/
export function BossBarDemo() {
  return (
    <div className="flex w-182 flex-col gap-12">
      <BossBar name="凋灵" value={0.75} />
      <BossBar name="末影龙" value={0.25} />
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/boss-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/boss-bar/index.tsx

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