Blocks

Avatar

A circular image with an optional text fallback, composed from three sub-helpers.

Installation

bin/rails g shadcnrb:component avatar

Usage

Compose sui.avatar do |a| with a.image and/or a.fallback inside a block.

<%= sui.avatar do |a| %>
  <%= a.fallback "JD" %>
<% end %>

<%= sui.avatar do |a| %>
  <%= a.image src: "https://i.pravatar.cc/100?img=3", alt: "User" %>
  <%= a.fallback "U" %>
<% end %>

Fallback on broken image

Pass a URL that fails to load (404, network error) and the fallback shows instead. The onerror handler removes the broken <img> so the sibling fallback takes over.

<%= sui.avatar do |a| %>
  <%= a.image src: "/does-not-exist.png", alt: "Missing" %>
  <%= a.fallback "SC" %>
<% end %>

Sizes

Pass size: to sui.avatar to adjust the circle diameter.

<!-- size: :sm -->
<%= sui.avatar size: :sm do |a| %>
  <%= a.image src: "https://i.pravatar.cc/100?img=3", alt: "User" %>
  <%= a.fallback "U" %>
<% end %>

<!-- size: :default -->
<%= sui.avatar size: :default do |a| %>
  <%= a.image src: "https://i.pravatar.cc/100?img=3", alt: "User" %>
  <%= a.fallback "U" %>
<% end %>

<!-- size: :lg -->
<%= sui.avatar size: :lg do |a| %>
  <%= a.image src: "https://i.pravatar.cc/100?img=3", alt: "User" %>
  <%= a.fallback "U" %>
<% end %>

API

Helper	Prop	Type	Default	Description
`sui.avatar`	`size`	Symbol	`:default`	Circle size — `:sm` (24 px), `:default` (32 px), `:lg` (40 px)
`a.image`	`src`	String	—	Image URL (required)
`a.image`	`alt`	String	`""`	Alt text for the image
`a.fallback`	`name`	String	`nil`	Initials or text shown when the image is absent or fails to load
all helpers	`**opts`	Hash	—	Any extra HTML attributes are forwarded to the tag

Next: Button →