Avatar group

UI::AvatarGroup

Overlapping avatars with a "+N" count for the rest.

# VelvetKit ## Avatar group (`UI::AvatarGroup`) Overlapping avatars with a "+N" count for the rest. Add it: `bin/rails generate velvetkit:add avatar_group` Also adds: `avatar` ### Arguments ```ruby UI::AvatarGroup.new(max: 5, size: :default, class: nil, **html_attrs) ``` Slots: `with_avatar` ### Example: Default Stack ```erb <div class="space-y-8"> <div> <p class="text-sm text-muted-foreground mb-3">4 avatars, overlapping with ring separation</p> <%= render(UI::AvatarGroup.new) do |group| %> <% group.with_avatar { "JD" } %> <% group.with_avatar { "AS" } %> <% group.with_avatar { "RM" } %> <% group.with_avatar { "BK" } %> <% end %> </div> </div> ``` ### Example: With Overflow ```erb <div class="space-y-8"> <div> <p class="text-sm text-muted-foreground mb-3">max=3 with 6 total → shows 3 + "+3"</p> <%= render(UI::AvatarGroup.new(max: 3)) do |group| %> <% group.with_avatar { "JD" } %> <% group.with_avatar { "AS" } %> <% group.with_avatar { "RM" } %> <% group.with_avatar { "BK" } %> <% group.with_avatar { "CD" } %> <% group.with_avatar { "PK" } %> <% end %> </div> <div> <p class="text-sm text-muted-foreground mb-3">max=2 with 5 total → shows 2 + "+3"</p> <%= render(UI::AvatarGroup.new(max: 2, size: :sm)) do |group| %> <% group.with_avatar { "JD" } %> <% group.with_avatar { "AS" } %> <% group.with_avatar { "RM" } %> <% group.with_avatar { "BK" } %> <% group.with_avatar { "CD" } %> <% end %> </div> </div> ``` ### Example: Small Stack ```erb <div class="space-y-8"> <div> <p class="text-sm text-muted-foreground mb-3">Small avatars stacked (size: :sm)</p> <%= render(UI::AvatarGroup.new(size: :sm)) do |group| %> <% group.with_avatar { "JD" } %> <% group.with_avatar { "AS" } %> <% group.with_avatar { "RM" } %> <% group.with_avatar { "BK" } %> <% group.with_avatar { "CD" } %> <% end %> </div> </div> ```

bin/rails generate velvetkit:add avatar_group

Also adds: Avatar
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

Default Stack

4 avatars, overlapping with ring separation

default.html.erb

<div class="space-y-8">
  <div>
    <p class="text-sm text-muted-foreground mb-3">4 avatars, overlapping with ring separation</p>
    <%= render(UI::AvatarGroup.new) do |group| %>
      <% group.with_avatar { "JD" } %>
      <% group.with_avatar { "AS" } %>
      <% group.with_avatar { "RM" } %>
      <% group.with_avatar { "BK" } %>
    <% end %>
  </div>
</div>

With Overflow

max=3 with 6 total → shows 3 + "+3"

max=2 with 5 total → shows 2 + "+3"

overflow.html.erb

<div class="space-y-8">
  <div>
    <p class="text-sm text-muted-foreground mb-3">max=3 with 6 total → shows 3 + "+3"</p>
    <%= render(UI::AvatarGroup.new(max: 3)) do |group| %>
      <% group.with_avatar { "JD" } %>
      <% group.with_avatar { "AS" } %>
      <% group.with_avatar { "RM" } %>
      <% group.with_avatar { "BK" } %>
      <% group.with_avatar { "CD" } %>
      <% group.with_avatar { "PK" } %>
    <% end %>
  </div>
  <div>
    <p class="text-sm text-muted-foreground mb-3">max=2 with 5 total → shows 2 + "+3"</p>
    <%= render(UI::AvatarGroup.new(max: 2, size: :sm)) do |group| %>
      <% group.with_avatar { "JD" } %>
      <% group.with_avatar { "AS" } %>
      <% group.with_avatar { "RM" } %>
      <% group.with_avatar { "BK" } %>
      <% group.with_avatar { "CD" } %>
    <% end %>
  </div>
</div>

Small Stack

Small avatars stacked (size: :sm)

small.html.erb

<div class="space-y-8">
  <div>
    <p class="text-sm text-muted-foreground mb-3">Small avatars stacked (size: :sm)</p>
    <%= render(UI::AvatarGroup.new(size: :sm)) do |group| %>
      <% group.with_avatar { "JD" } %>
      <% group.with_avatar { "AS" } %>
      <% group.with_avatar { "RM" } %>
      <% group.with_avatar { "BK" } %>
      <% group.with_avatar { "CD" } %>
    <% end %>
  </div>
</div>

API

Arguments

UI::AvatarGroup.new(max: 5, size: :default, class: nil, **html_attrs)

Slots: with_avatar