Avatars
Where to Use Liquid Metal Avatar in React Apps
Liquid Metal Avatar is a Paper LiquidMetal ring avatar with size variants, image, and fallback. Profile chrome ships it when identity marks should feel premium and consistent across nav, comments, and menus.
Where teams use Liquid Metal Avatar
Use case 1
Comment and activity avatars
Feeds and threads use sized variants with fallback initials. Liquid metal ring elevates presence without custom illustration.
Use case 2
Nav account mark
Top bars show the signed-in user with a small metal ring. Image and fallback keep empty photo states graceful.
Use case 3
Team member stacks
Assignee stacks reuse the avatar sizes for density. Consistent ring treatment unifies the design system.
Use case 4
Public profile headers
Creator pages feature a large liquid metal avatar above bios. Fallback handles users without uploaded photos.
Who it is for
Design-system engineers standardizing premium avatar treatments across the app.
Try Liquid Metal Avatar on AkmanOS
Compare sizes and fallbacks in the preview, then copy markdown into Claude or Cursor to replace stock avatars with Liquid Metal Avatar.
Preview /preview/liquid-metal-avatarMore in Avatars
- Liquid Metal Profile ButtonProfile chip with liquid metal frame and avatar — preview mode skips navigation. Explore real product surfaces for the Liquid Metal Profile Button component — then open the live AkmanOS preview and copy production-ready source.
- Profile DropdownAccount menu with liquid metal avatar, workspace actions, and sign out. Explore real product surfaces for the Profile Dropdown component — then open the live AkmanOS preview and copy production-ready source.
- Switch WorkspaceWorkspace switcher with avatar, title, animated dropdown, and add space. Explore real product surfaces for the Switch Workspace component — then open the live AkmanOS preview and copy production-ready source.