Avatar

A circular user image with a text fallback.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add avatar --yes

The avatar registry item installs these files:

app/components/ui_component.rb
app/components/ui/avatar_component.rb
app/helpers/ui/avatar_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_avatar(src: "/avatar.png", alt: "Eduardo Moraes", fallback: "EM") %>

Or render Ui::AvatarComponent directly:

<%= render Ui::AvatarComponent.new(fallback: "EM", aria: { label: "Eduardo Moraes" }) %>

Examples

Image, fallback and label

Render an image with a fallback, or a fallback on its own for users with no photo.

EM ?

<div class="flex items-center gap-4">
  <%= ui_avatar(
        src: "https://i.pravatar.cc/96?img=12",
        alt: "Eduardo Moraes",
        fallback: "EM"
      ) %>
  <%= ui_avatar(fallback: "EM", aria: { label: "Eduardo Moraes" }) %>
  <%= ui_avatar(fallback: "?", aria: { label: "Anonymous user" }) %>

<div class="flex items-center gap-4">
  <%= ui_avatar(
        src: "https://i.pravatar.cc/96?img=12",
        alt: "Eduardo Moraes",
        fallback: "EM"
      ) %>
  <%= ui_avatar(fallback: "EM", aria: { label: "Eduardo Moraes" }) %>
  <%= ui_avatar(fallback: "?", aria: { label: "Anonymous user" }) %>
</div>

API reference

ui_avatar(**options, &block) wraps Ui::AvatarComponent.new(**options).

Argument	Type	Default	Description
`src`	String	`nil`	The image URL.
`alt`	String	`""`	The image's alt text.
`fallback`	String	`nil`	Initials or a symbol shown when there is no image.
`**attrs`	Hash	`{}`	Free-form HTML attributes on the wrapper.