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

<template>
  <HiveManabar
    username="barddev"
    variant="full"
    :showValues="true"
    :showCooldown="true"
  />
</template>

<script setup lang="ts">
import { HiveManabar } from "@hiveio/honeycomb-vue";
</script>

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
classstring-

Variants

Compact

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

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

Ring

Single RC ring, ideal for headers or navigation bars.

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

Display Options

<template>
  <!-- Full variant with all options -->
  <HiveManabar
    username="barddev"
    variant="full"
    :showLabels="true"
    :showValues="true"
    :showCooldown="true"
  />

  <!-- Minimal display -->
  <HiveManabar
    username="barddev"
    variant="full"
    :showLabels="false"
    :showValues="false"
    :showCooldown="false"
  />
</template>
Balance CardPost Card