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

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

<div class="max-w-md">
  <UserCard username="barddev" />
</div>

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

<!-- 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" />

Without stats

<!-- Hide post count and balances -->
<UserCard username="blocktrades" showStats={false} />

Custom styling

<UserCard
  username="blocktrades"
  class="bg-hive-red/10 border-hive-red"
/>

Avatar Balance Card