Honeycomb
npmGitHub

HiveManabar

Display voting power, downvote mana, and resource credits with circular progress indicators.

Hive Manabars

Hive accounts have three types of mana that regenerate over time: Voting Power (upvotes), Downvote Mana (downvotes), and Resource Credits (RC - for all blockchain operations). Full regeneration takes approximately 5 days. Data refreshes every minute.

Usage

import { HiveManabar } from "@hiveio/honeycomb-react";

function UserStats() {
  return (
    <HiveManabar
      username="barddev"
      variant="full"
      showValues
      showCooldown
    />
  );
}

Preview

Voting Power
90%
Full in: 12h 30m
Downvote
100%
Full
Resource Credits
80%
Full in: 1d 2h

Props

PropTypeDefault
usernamestringrequired
variant"full" | "compact" | "ring""full"
showLabelsbooleantrue
showValuesbooleanfalse
showCooldownbooleantrue
classNamestring-

Variants

Compact

Small rings in a row, perfect for sidebars or user cards.

// Compact variant - small rings in a row
<HiveManabar username="barddev" variant="compact" />

Ring

Single RC ring, ideal for headers or navigation bars.

// Ring variant - single RC ring (for headers/navbars)
<HiveManabar username="barddev" variant="ring" />

Display Options

// Full variant with all options
<HiveManabar
  username="barddev"
  variant="full"
  showLabels={true}    // Show "Voting Power", "Downvote", "RC" labels
  showValues={true}    // Show current/max values
  showCooldown={true}  // Show time until full regeneration
/>

// Minimal display
<HiveManabar
  username="barddev"
  variant="full"
  showLabels={false}
  showValues={false}
  showCooldown={false}
/>
Balance CardPost Card