Avatar

UI::Avatar

A person's picture, with initials when there is none.

# VelvetKit ## Avatar (`UI::Avatar`) A person's picture, with initials when there is none. Add it: `bin/rails generate velvetkit:add avatar` ### Arguments ```ruby UI::Avatar.new(shape: :circle, size: :default, color: :default, alt: nil, class: nil, **html_attrs) ``` Slots: `with_image`, `with_fallback` ### Example: Sizes ```erb <div class="flex flex-wrap items-center gap-6"> <% { sm: 24, default: 40, lg: 48, xl: 64 }.each do |size, px| %> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(size: size)) { "JD" } %> <span class="text-xs text-muted-foreground"><%= size %> (<%= px %>px)</span> </div> <% end %> </div> ``` ### Example: Shapes ```erb <div class="flex flex-wrap items-center gap-6"> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(shape: :circle)) { "JD" } %> <span class="text-xs text-muted-foreground">Circle (People)</span> </div> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(shape: :rounded)) { "NS" } %> <span class="text-xs text-muted-foreground">Rounded (Groups/Projects)</span> </div> </div> ``` ### Example: Colors ```erb <div class="flex flex-wrap items-center gap-6"> <% { default: "bg-muted", primary: "bg-primary", destructive: "bg-destructive", amber: "bg-amber-500", emerald: "bg-emerald-500", purple: "bg-purple-500", sky: "bg-sky-500" }.each do |color, label| %> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(color: color)) { "JD" } %> <span class="text-xs text-muted-foreground"><%= color %></span> </div> <% end %> </div> ``` ### Example: With Image ```erb <div class="flex flex-wrap items-end gap-6"> <% { sm: 24, default: 40, lg: 48 }.each do |size, px| %> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(size: size)) do |avatar| %> <% avatar.with_image(src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=face", alt: "User") %> <% end %> <span class="text-xs text-muted-foreground"><%= size %> (<%= px %>px)</span> </div> <% end %> </div> ```

bin/rails generate velvetkit:add avatar

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

Examples

Sizes

sm (24px)

default (40px)

lg (48px)

xl (64px)

sizes.html.erb

<div class="flex flex-wrap items-center gap-6">
  <% { sm: 24, default: 40, lg: 48, xl: 64 }.each do |size, px| %>
    <div class="flex flex-col items-center gap-2">
      <%= render(UI::Avatar.new(size: size)) { "JD" } %>
      <span class="text-xs text-muted-foreground"><%= size %> (<%= px %>px)</span>
    </div>
  <% end %>
</div>

Shapes

Circle (People)

Rounded (Groups/Projects)

shapes.html.erb

<div class="flex flex-wrap items-center gap-6">
  <div class="flex flex-col items-center gap-2">
    <%= render(UI::Avatar.new(shape: :circle)) { "JD" } %>
    <span class="text-xs text-muted-foreground">Circle (People)</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <%= render(UI::Avatar.new(shape: :rounded)) { "NS" } %>
    <span class="text-xs text-muted-foreground">Rounded (Groups/Projects)</span>
  </div>
</div>

Colors

default

primary

destructive

amber

emerald

purple

sky

colors.html.erb

<div class="flex flex-wrap items-center gap-6">
  <% { default: "bg-muted", primary: "bg-primary", destructive: "bg-destructive", amber: "bg-amber-500", emerald: "bg-emerald-500", purple: "bg-purple-500", sky: "bg-sky-500" }.each do |color, label| %>
    <div class="flex flex-col items-center gap-2">
      <%= render(UI::Avatar.new(color: color)) { "JD" } %>
      <span class="text-xs text-muted-foreground"><%= color %></span>
    </div>
  <% end %>
</div>

With Image

sm (24px)

default (40px)

lg (48px)

with_image.html.erb

<div class="flex flex-wrap items-end gap-6">
  <% { sm: 24, default: 40, lg: 48 }.each do |size, px| %>
    <div class="flex flex-col items-center gap-2">
      <%= render(UI::Avatar.new(size: size)) do |avatar| %>
        <% avatar.with_image(src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=face", alt: "User") %>
      <% end %>
      <span class="text-xs text-muted-foreground"><%= size %> (<%= px %>px)</span>
    </div>
  <% end %>
</div>

API

Arguments

UI::Avatar.new(shape: :circle, size: :default, color: :default, alt: nil, class: nil, **html_attrs)

Slots: with_image with_fallback