Documentation

Badge

Count and rarity badge for item stacks; pure styling with default / dim / gold variants.

641史诗v0.1.0

import { Badge } from "./index";

/**
 * Badge 预览用例：物品数量与稀有标识
*/
export function BadgeDemo() {
  return (
    <div className="flex items-end gap-12">
      <span className="mc-tex-slot relative block size-18">
        <Badge className="absolute right-1 bottom-0">64</Badge>
      </span>
      <span className="mc-tex-slot relative block size-18">
        <Badge className="absolute right-1 bottom-0" variant="gold">
          1
        </Badge>
      </span>
      <Badge variant="gold">史诗</Badge>
      <Badge variant="dim">v0.1.0</Badge>
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/badge

npm install

$pnpm add @tennantite/ui

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

Usage

npm import

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

CLI copy import

import { Badge } from "@/components/tennantite/badge";

import { Badge } from "./index";

/**
 * Badge 预览用例：物品数量与稀有标识
*/
export function BadgeDemo() {
  return (
    <div className="flex items-end gap-12">
      <span className="mc-tex-slot relative block size-18">
        <Badge className="absolute right-1 bottom-0">64</Badge>
      </span>
      <span className="mc-tex-slot relative block size-18">
        <Badge className="absolute right-1 bottom-0" variant="gold">
          1
        </Badge>
      </span>
      <Badge variant="gold">史诗</Badge>
      <Badge variant="dim">v0.1.0</Badge>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
variant	"default" \| "dim" \| "gold"	"default"	Visual variant: default item count (white text with shadow) / dim secondary info / gold rare or title.

Source

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

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