UserCard
Display Hive user profile information in various formats.
User Data
Fetches user data from blockchain. Displays profile info, reputation, and optionally Hive Power and post count.
Usage
<template>
<div class="max-w-md">
<UserCard username="barddev" />
</div>
</template>
<script setup>
import { UserCard } from "@hiveio/honeycomb-vue";
</script>Preview
@barddev(65)
barddev
@barddev • Rep: 65
42 posts1,234.567 HP
Props
| Prop | Type | Default |
|---|---|---|
username | string | required |
variant | "compact" | "default" | "expanded" | "default" |
showStats | boolean | true |
className / class | string | - |
Examples
Variants
<template>
<!-- Compact - inline display -->
<UserCard username="blocktrades" variant="compact" />
<!-- Default - card with basic info -->
<UserCard username="blocktrades" variant="default" />
<!-- Expanded - full profile card with cover image -->
<UserCard username="blocktrades" variant="expanded" />
</template>Without stats
<template>
<!-- Hide post count and balances -->
<UserCard username="blocktrades" :showStats="false" />
</template>Custom styling
<template>
<UserCard
username="blocktrades"
class="bg-hive-red/10 border-hive-red"
/>
</template>