文档目录

进度条

原版 182×5 经验条与 7 色 / 4 种 notched Boss 条，按比例裁剪。

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>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/progress

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

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

CLI 拷贝导入

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	描述
color	"blue" \| "green" \| "pink" \| "purple" \| "red" \| "white" \| "yellow"	"purple"	Boss 条颜色（仅 variant="boss"）。
notched	6 \| 10 \| 12 \| 20	—	Boss 条分段数（仅 variant="boss"；省略为连续条）。
variant	"boss" \| "xp"	"xp"	填充变体：xp 经验条 / boss Boss 条。

源码

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

npm 包保留源码目录，可直接复制改造。