PyraUI logo
PyraUI
Docs
Home Docs Components Roadmap Playground GitHub
Launch Playground
Playground
Browse Components 70
Accordion Alert Animated Chart Autocomplete Avatar Avatar Group Badge Badge Card Breadcrumbs Button Card Carousel Chart Color Picker Conditional Form Connections Widget Countdown DatePicker Diff Dock Drawer File Upload Filter Panel Gantt Chart Gauge Grid Heatmap Hero Input Installation Introduction Kanban Board Kbd Lightbox Link List Live Chat Live Data Table Live Feed Map Masonry Grid Mockup Modal Multi-Select Navbar Password Strength Meter Progress Rating Resizable Panels Rich Text Editor Select Signature Pad Skeleton Skeleton Layout Slider Sortable List Stats Stepper Swap Table Tabs Tag Input Theme Config Theme Switch Timeline Toast Usage User Profile Card Video Player Wizard

Avatar Group

Avatar group component for displaying multiple users in a row with overlapping avatars. Supports online status indicators and overflow count.

Stacked Avatars

Ava Stone
Kai Morgan
Noah Hill
Evelyn Wu
Leo Park
+1

          <.avatar_group users={@users} max_visible={5} />
        

Different Sizes

Small

Ava Stone
Kai Morgan
Noah Hill
Evelyn Wu

Medium

Ava Stone
Kai Morgan
Noah Hill
Evelyn Wu

Large

Ava Stone
Kai Morgan
Noah Hill
Evelyn Wu

Props

Prop Type Default Description
users list - List of user maps with :name, :avatar, :online
max_visible integer 5 Maximum number of avatars to show
size atom :md Avatar size (:sm, :md, :lg)

We can't find the internet

Attempting to reconnect

Something went wrong!

Attempting to reconnect