ProfilePopover

Interactive popover that displays user profile information with actions for editing, switching, and viewing details.

ProfilePopover combines ProfileCard with the Radix Popover primitive to provide an interactive profile preview that can be triggered by hover or click.

Hover over avatar:

Click to open:

Installation

npx bigblocks add profile-popover

Import

import { ProfilePopover } from 'bigblocks';

API Reference

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

Prop	Type	Default	Description
profile*	`ProfileInfo`	-	Profile data to display
children*	`React.ReactNode`	-	Trigger element for the popover
onEdit	`() => void`	-	Callback when edit is clicked
onSwitch	`() => void`	-	Callback when switch profile is clicked
onViewDetails	`() => void`	-	Callback when view details is clicked
openOnHover	`boolean`	`true`	Open popover on hover vs click
align	`'start' \| 'center' \| 'end'`	`'center'`	Popover alignment
side	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Popover position
className	`string`	-	Additional CSS classes

* Required props

Basic Usage

import { ProfilePopover } from 'bigblocks';

export default function UserDisplay() {
  const profile = {
    name: 'Satoshi Nakamoto',
    id: 'bap123456789',
    address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
    isPublished: true,
    alternateName: '@satoshi',
    description: 'Creator of Bitcoin',
    image: 'https://api.dicebear.com/7.x/avataaars/svg?seed=satoshi'
  };

  return (
    <ProfilePopover
      profile={profile}
      onViewDetails={() => router.push(`/profile/${profile.id}`)}
    >
      <img 
        src={profile.image} 
        alt={profile.name}
        className="w-10 h-10 rounded-full cursor-pointer"
      />
    </ProfilePopover>
  );
}

Profile Actions

ProfilePopover provides three optional action callbacks:

<ProfilePopover
  profile={profile}
  onEdit={() => openEditModal()}
  onSwitch={() => showProfileSwitcher()}
  onViewDetails={() => router.push(`/profile/${profile.id}`)}
>
  <button className="flex items-center gap-2">
    <BitcoinAvatar src={profile.image} alt={profile.name} fallback="U" size="2" />
    <span>{profile.name}</span>
  </button>
</ProfilePopover>

Interaction Modes

Control whether the popover opens on hover or click:

// Hover mode (default) - good for quick previews
<ProfilePopover 
  profile={profile}
  openOnHover={true}
>
  <span className="text-blue-600 hover:underline">
    @{profile.alternateName}
  </span>
</ProfilePopover>

// Click mode - better for mobile and touch devices
<ProfilePopover
  profile={profile}
  openOnHover={false}
  onViewDetails={() => console.log('View profile')}
>
  <button className="btn-primary">
    View Profile
  </button>
</ProfilePopover>

For positioning options (side, align, etc.), see the Radix Popover documentation.

Profile Data Structure

interface ProfileInfo {
  id: string;
  name: string;
  address: string;
  alternateName?: string;
  description?: string;
  image?: string;
  isPublished: boolean;
}

ProfileCard - Profile display component
BitcoinAvatar - Avatar with Bitcoin URL support
ProfileSwitcher - Switch between multiple profiles

ProfilePopover

On this page