CleenUI · Media · AvatarRow

AvatarRow

Stacked group of avatars with overlap, "+N more" overflow, and per-avatar tooltips.

storybook.cleenui.com
Open Storybook
Live preview

Interactive AvatarRow preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About AvatarRow

AvatarRow shows a group of users as overlapping avatar circles. Cap the visible count to keep the row compact — any extras collapse into a "+N" indicator that opens a popover listing the remaining users.

Each avatar can show a tooltip on hover with the user's name, role, or any custom content. Use it anywhere multiple users are associated with a single entity: a task's collaborators, a document's editors, a meeting's attendees.

When to use it

  • Collaborators on a task or document.
  • Recent participants in a thread or channel.
  • Shared owners or assignees on a record.
  • Attendee lists on calendar events.

Common props

Prop
Type
Description
users
User[]
Users to render.
max
number
Max visible avatars before overflow.
size
"sm" | "md" | "lg"
Avatar size.
overlap
number
Pixel overlap between avatars.
tooltipContent
(user) => ReactNode
Custom tooltip renderer.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with