Documentation

Progress

Vanilla 5 GUI px high progress bar clipped at 182 GUI px, with XP / boss textures.

import { Progress } from "./index";

/**
 * Progress 预览用例：经验条 / Boss 血条
*/
export function ProgressDemo() {
  return (
    <div className="flex w-182 flex-col gap-4">
      <Progress aria-label="经验值" value={62} />
      <Progress aria-label="Boss 血量" value={85} variant="boss" />
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/progress

npm install

$pnpm add @tennantite/ui

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

Usage

npm import

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

CLI copy import

import { Progress } from "@/components/tennantite/progress";

import { Progress } from "./index";

/**
 * Progress 预览用例：经验条 / Boss 血条
*/
export function ProgressDemo() {
  return (
    <div className="flex w-182 flex-col gap-4">
      <Progress aria-label="经验值" value={62} />
      <Progress aria-label="Boss 血量" value={85} variant="boss" />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
color	"blue" \| "green" \| "pink" \| "purple" \| "red" \| "white" \| "yellow"	"purple"	Boss bar color (variant="boss" only).
notched	6 \| 10 \| 12 \| 20	—	Boss bar notch count (variant="boss" only; omit for a continuous bar).
variant	"boss" \| "xp"	"xp"	Fill variant: xp experience bar / boss boss bar.

Source

packages/ui/src/primitives/progress/index.tsx

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