HiveAvatar

Display Hive user profile pictures with automatic fallback.

Hive Avatars

Avatars are loaded from images.hive.blog/u/username/avatar. Falls back to colored initials when image fails to load.

Usage

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

function UserProfile() {
  return (
    <div className="flex items-center gap-3">
      <HiveAvatar username="barddev" size="lg" />
      <span>@barddev</span>
    </div>
  );
}

Preview

Props

Prop	Type	Default
`username`	`string`	required
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
`className` / `class`	`string`	-
`showBorder`	`boolean`	`false`
`fallbackColor`	`string`	-

Examples

Preset sizes

<HiveAvatar username="barddev" size="xs" />  {/* 24px */}
<HiveAvatar username="barddev" size="sm" />  {/* 32px */}
<HiveAvatar username="barddev" size="md" />  {/* 40px */}
<HiveAvatar username="barddev" size="lg" />  {/* 48px */}
<HiveAvatar username="barddev" size="xl" />  {/* 64px */}

Custom styling

// Custom styling with className
<HiveAvatar
  username="barddev"
  className="ring-2 ring-hive-red ring-offset-2"
/>

// With border
<HiveAvatar
  username="barddev"
  className="border-2 border-hive-red"
/>

// Overlapping avatars
<div className="flex -space-x-2">
  <HiveAvatar username="barddev" className="border-2 border-background" />
  <HiveAvatar username="blocktrades" className="border-2 border-background" />
  <HiveAvatar username="arcange" className="border-2 border-background" />
</div>

API Tracker User Card