# 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

<% { sm: 24, default: 40, lg: 48, xl: 64 }.each do |size, px| %>

<%= render(UI::Avatar.new(size: size)) { "JD" } %> <%= size %> (<%= px %>px)

<% end %>

``` ### Example: Shapes ```erb

<%= render(UI::Avatar.new(shape: :circle)) { "JD" } %> Circle (People)

<%= render(UI::Avatar.new(shape: :rounded)) { "NS" } %> Rounded (Groups/Projects)

``` ### Example: Colors ```erb

<% { 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| %>

<%= render(UI::Avatar.new(color: color)) { "JD" } %> <%= color %>

<% end %>

``` ### Example: With Image ```erb

<% { sm: 24, default: 40, lg: 48 }.each do |size, px| %>

<%= 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 %> <%= size %> (<%= px %>px)

<% end %>

```