Group Avatar

GroupAvatar is a component that displays multiple user avatars in a grid layout with smooth corner styling. It supports different corner types including iOS-style superellipse shapes for modern visual appeal. The component automatically arranges up to 4 avatars in a 2x2 grid and applies smooth corner masks for enhanced visual presentation.

Library

Lobe UI

Framework

React

Type

component

License

MIT

Install

pnpm add @lobehub/ui

Files

• src/GroupAvatar/GroupAvatar.tsx
• src/GroupAvatar/index.ts
• src/GroupAvatar/stable.ts
• src/GroupAvatar/style.ts
• src/GroupAvatar/type.ts
• src/Avatar/index.ts
• src/Block/type.ts
• src/utils/smoothCorners.ts

Source

https://github.com/lobehub/lobe-ui

Categories

• Avatar Components
• React Avatar Components
• Avatar Group Components
• React Avatar Group Components
• Data Display Components
• React Data Display Components

More from Lobe UI

• Agent Avatar
• Avatar
• Base Ui Avatar
• Accordion
• Action Icon
• Action Icon Group
• Alert
• Anchor
• Auto Complete
• Badge
• Block
• Breadcrumb