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

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

function ProfilePage() {
  return (
    <div className="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"
  className="bg-hive-red/10 border-hive-red"
/>

Avatar Balance Card