# 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>
```