Avatar - Rails UI Components

Usage

<%= ui.avatar %>
<%= ui.avatar user: current_user %>
<%= ui.avatar user: current_user, size: 16, variant: :rounded %>

Props

Prop	Type	Default	Description
`user`	`Object`	`nil`	User object with `full_name` and optionally `avatar` methods. When provided, displays user's avatar image or initials.
`size`	`Integer`	`12`	Size of the avatar in spacing units. Sets both width and height.
`variant`	`Symbol` `:circle` \| `:rounded` \| `:square`	`:circle`	Shape of the avatar.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

Examples

Default (no user)

<div class="flex items-center gap-2">
  <%= ui.avatar size: 8 %>
  <%= ui.avatar size: 12 %>
  <%= ui.avatar size: 16 %>
  <%= ui.avatar size: 20 %>
</div>

With user

<div class="flex items-center gap-2">
  <%= ui.avatar user: User.first, size: 8 %>
  <%= ui.avatar user: User.first, size: 12 %>
  <%= ui.avatar user: User.first, size: 16 %>
  <%= ui.avatar user: User.first, size: 20 %>
</div>

Rounded variant

<div class="flex items-center gap-2">
  <%= ui.avatar user: User.first, size: 8, variant: :rounded %>
  <%= ui.avatar user: User.first, size: 12, variant: :rounded %>
  <%= ui.avatar user: User.first, size: 16, variant: :rounded %>
</div>

Square variant

<div class="flex items-center gap-2">
  <%= ui.avatar user: User.first, size: 8, variant: :square %>
  <%= ui.avatar user: User.first, size: 12, variant: :square %>
  <%= ui.avatar user: User.first, size: 16, variant: :square %>
</div>