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

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

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

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}
  showValues={true}
  showCooldown={true}
/>

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