VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="space-y-8">
  <div>
    <p class="text-sm text-muted-foreground mb-3">max=3 with 6 total → shows 3 + "+3"</p>
    <div role="list" aria-label="Avatars" class="flex items-center -space-x-2"><span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span>
      <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">AS</span></span>
      <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">RM</span></span>
      <span class="relative flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background h-10 w-10 text-sm" role="listitem" aria-label="3 more users">+3</span></div>
  </div>
  <div>
    <p class="text-sm text-muted-foreground mb-3">max=2 with 5 total → shows 2 + "+3"</p>
    <div role="list" aria-label="Avatars" class="flex items-center -space-x-2"><span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span>
      <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">AS</span></span>
      <span class="relative flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background h-6 w-6 text-xs" role="listitem" aria-label="3 more users">+3</span></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>

No notes provided.

No params configured.