ProfileBox

Expandable profile selector with avatar, name, URL, and dropdown list of social profile items. Supports controlled and uncontrolled modes.

When to use

check_circleWhen to use

  • In sidebar headers for user profile
  • When showing multiple linked profiles
  • For expandable profile information
  • In navigation areas

cancelWhen not to use

  • For simple user avatars
  • When you only need to show name (use simpler component)
  • In tight spaces where dropdown wont fit

States

Default (Closed)

LinkedIn

linkedin.com/in/lukasvilkus

arrow_outward

Medium

medium.com/@vilkus

arrow_outward

Work

emplifi.design

arrow_outward

Instagram

instagram.com/@chodilove

arrow_outward
Default

Hover (Closed)

Hover

Active (Closed)

Active

Open

LinkedIn

linkedin.com/in/lukasvilkus

arrow_outward

Medium

medium.com/@vilkus

arrow_outward

Work

emplifi.design

arrow_outward

Instagram

instagram.com/@chodilove

arrow_outward
Open

Usage

tsx
import { ProfileBox } from '@/components/ProfileBox';

<ProfileBox 
  name="Lukas Vilkus" 
  url="vilkus.com"
  avatarType="logo"
  profileItems={[
    { name: 'LinkedIn', url: 'linkedin.com/in/lukasvilkus', type: 'linkedin', href: '...' },
    { name: 'Medium', url: 'medium.com/@vilkus', type: 'medium', href: '...' },
  ]}
/>

// Controlled
const [isOpen, setIsOpen] = useState(false);
<ProfileBox 
  name="Lukas Vilkus" 
  url="vilkus.com"
  isOpen={isOpen}
  onToggle={setIsOpen}
/>

Props

PropTypeDefaultDescription
name*string—User's display name
url*string—User's website or handle
avatarType'logo' | 'linkedin' | 'medium' | 'emplifi' | 'chodilove''logo'Avatar icon type
avatarIconReactNode—Custom avatar icon
profileItemsProfileItem[][]Social profile items to show when expanded
isOpenboolean—Controlled open state
onToggle(isOpen: boolean) => void—Callback when open state changes

Accessibility

  • Uses aria-expanded to indicate open state
  • Uses aria-haspopup to indicate dropdown
  • Keyboard accessible (Enter/Space to toggle)
  • Focus management when opening/closing