BitcoinAvatar

Avatar component that combines Radix Avatar with Bitcoin URL resolution, automatic fallbacks, and Bitcoin-themed styling

Profile picture that supports Bitcoin URLs, with automatic resolution and fallback handling.

BitcoinAvatar combines BitcoinImage with the Radix Avatar primitive to provide a styled avatar component that can resolve Bitcoin protocol URLs (b://, ord://, etc.) while maintaining all the styling capabilities of Radix Themes.

Installation

npx bigblocks add bitcoin-avatar

Import

import { BitcoinAvatar } from 'bigblocks';

API Reference

This component extends the Avatar primitive and inherits all its props.

Prop	Type	Default	Description
src	`string`	-	Image source - can be blockchain URL (b://, ord://, etc.) or regular URL
alt*	`string`	-	Alt text for accessibility
fallback*	`string`	-	Fallback text when image is not available
showLoading	`boolean`	`false`	Show loading state for image resolution
timeout	`number`	`5000`	Timeout for Bitcoin URL resolution (ms)
size	`Responsive<"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">`	`"3"`	Controls avatar size
variant	`"solid" \| "soft"`	`"soft"`	Visual style variant
color	Radix color	-	Color theme
highContrast	`boolean`	-	Increases color contrast
radius	`"none" \| "small" \| "medium" \| "large" \| "full"`	-	Border radius

* Required props

Basic Usage

import { BitcoinAvatar } from 'bigblocks';

export default function UserProfile() {
  return (
    <BitcoinAvatar
      src="b://abc123def456..."
      alt="User's Bitcoin avatar"
      fallback="JD"
      size="4"
      variant="solid"
      color="orange"
      showLoading={true}
    />
  );
}

Bitcoin URL Support

BitcoinAvatar automatically resolves Bitcoin protocol URLs using BitcoinImage under the hood:

// On-chain image via b:// protocol
<BitcoinAvatar
  src="b://abc123def456..."
  alt="On-chain avatar"
  fallback="BC"
  showLoading={true}
/>

// Ordinal inscription
<BitcoinAvatar
  src="ord://inscription_id"
  alt="Ordinal avatar"
  fallback="OR"
  timeout={10000}
/>

// Regular URLs work too
<BitcoinAvatar
  src="https://example.com/avatar.jpg"
  alt="Regular avatar"
  fallback="US"
/>

For styling options (size, variant, color, radius, etc.), see the Radix Avatar documentation.

BitcoinImage - Image component with Bitcoin URL support
ProfilePopover - Profile preview with avatar