Documentation

ExperienceBar

Green XP progress with a centered level badge.

import { ExperienceBar } from "./index";

/**
 * ExperienceBar 预览用例（规格 §6.1）
*/
export function ExperienceBarDemo() {
  return (
    <div className="flex w-182 flex-col gap-8">
      <ExperienceBar level={30} progress={0.62} />
      <ExperienceBar level={0} progress={0.05} />
    </div>
  );
}

Install

CLI copy

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

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