Components/Data display/Avatar

COMPONENT45.45

Avatar

Circular identity: image or initials in figure[data-variant="avatar"], with stacked groups, overlap and count badges.

INSTALL

1pnpm dlx @sayagodev/mo add avatar

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/avatar.css";

EXAMPLES

Basic

1<figure data-variant="avatar">2  <img src="https://github.com/shadcn.png" alt="" />3  <span>CN</span>4</figure>5

With badge

1<figure data-variant="avatar">2  <img src="https://github.com/shadcn.png" alt="" />3  <span>CN</span>4  <span data-badge data-variant="success" aria-hidden="true"></span>5</figure>6

With badge icon

1<figure data-variant="avatar">2  <img src="https://github.com/pranathip.png" alt="" />3  <span>PP</span>4  <span data-badge>5    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg>6  </span>7</figure>8

Size

1<div class="hstack gap-2">2  <figure data-variant="avatar" class="small">3    <img src="https://github.com/shadcn.png" alt="" />4  <span>CN</span>5  </figure>6  <figure data-variant="avatar">7    <img src="https://github.com/shadcn.png" alt="" />8  <span>CN</span>9  </figure>10  <figure data-variant="avatar" class="large">11    <img src="https://github.com/shadcn.png" alt="" />12  <span>CN</span>13  </figure>14</div>15

Group

1<figure data-variant="avatar" role="group">2  <figure data-variant="avatar">3    <img src="https://github.com/shadcn.png" alt="" />4  <span>CN</span>5  </figure>6  <figure data-variant="avatar">7    <img src="https://github.com/maxleiter.png" alt="" />8  <span>LR</span>9  </figure>10  <figure data-variant="avatar">11    <img src="https://github.com/evilrabbit.png" alt="" />12  <span>ER</span>13  </figure>14</figure>15

Group count

1<figure data-variant="avatar" role="group">2  <figure data-variant="avatar">3    <img src="https://github.com/shadcn.png" alt="" />4  <span>CN</span>5  </figure>6  <figure data-variant="avatar">7    <img src="https://github.com/maxleiter.png" alt="" />8  <span>LR</span>9  </figure>10  <figure data-variant="avatar">11    <img src="https://github.com/evilrabbit.png" alt="" />12  <span>ER</span>13  </figure>14  <figure data-variant="avatar">+3</figure>15</figure>16

Group count with icon

1<figure data-variant="avatar" role="group">2  <figure data-variant="avatar">3    <img src="https://github.com/shadcn.png" alt="" />4  <span>CN</span>5  </figure>6  <figure data-variant="avatar">7    <img src="https://github.com/maxleiter.png" alt="" />8  <span>LR</span>9  </figure>10  <figure data-variant="avatar">11    <img src="https://github.com/evilrabbit.png" alt="" />12  <span>ER</span>13  </figure>14  <figure data-variant="avatar">15    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg>16  </figure>17</figure>18

With dropdown menu

1<mo-dropdown>2  <button type="button" class="ghost icon" popovertarget="avatar-menu" aria-label="Open account menu" style="border-radius: var(--radius-full);">3    <figure data-variant="avatar">4      <img src="https://github.com/shadcn.png" alt="" />5  <span>CN</span>6    </figure>7  </button>8  <menu popover id="avatar-menu">9    <button role="menuitem" type="button">Profile</button>10    <button role="menuitem" type="button">Billing</button>11    <button role="menuitem" type="button">Settings</button>12    <hr />13    <button role="menuitem" type="button" data-variant="danger">Log out</button>14  </menu>15</mo-dropdown>16

RTL

1<div dir="rtl" class="hstack gap-6">2  <figure data-variant="avatar">3    <img src="https://github.com/shadcn.png" alt="" />4  <span>CN</span>5  </figure>6  <figure data-variant="avatar">7    <img src="https://github.com/evilrabbit.png" alt="" />8  <span>ER</span>9    <span data-badge data-variant="success" aria-hidden="true"></span>10  </figure>11  <figure data-variant="avatar" role="group">12    <figure data-variant="avatar">13      <img src="https://github.com/shadcn.png" alt="" />14  <span>CN</span>15    </figure>16    <figure data-variant="avatar">17      <img src="https://github.com/maxleiter.png" alt="" />18  <span>LR</span>19    </figure>20    <figure data-variant="avatar">21      <img src="https://github.com/evilrabbit.png" alt="" />22  <span>ER</span>23    </figure>24    <figure data-variant="avatar">+٣</figure>25  </figure>26</div>27

Demo

1<div class="hstack gap-6">2  <figure data-variant="avatar">3    <img src="https://github.com/shadcn.png" alt="" />4  <span>CN</span>5  </figure>6  <figure data-variant="avatar">7    <img src="https://github.com/evilrabbit.png" alt="" />8  <span>ER</span>9    <span data-badge data-variant="success" aria-hidden="true"></span>10  </figure>11  <figure data-variant="avatar" role="group">12    <figure data-variant="avatar">13      <img src="https://github.com/shadcn.png" alt="" />14  <span>CN</span>15    </figure>16    <figure data-variant="avatar">17      <img src="https://github.com/maxleiter.png" alt="" />18  <span>LR</span>19    </figure>20    <figure data-variant="avatar">21      <img src="https://github.com/evilrabbit.png" alt="" />22  <span>ER</span>23    </figure>24    <figure data-variant="avatar">+3</figure>25  </figure>26</div>27

USAGE

1<figure data-variant="avatar">MÒ</figure>2<figure data-variant="avatar"><img src="…" alt="" /></figure>3 4<!-- stacked group with count -->5<figure data-variant="avatar" role="group">6  <figure data-variant="avatar"><img src="…" alt="" /></figure>7  <figure data-variant="avatar">+3</figure>8</figure>

API

NAMEKINDDESCRIPTION

data-variant="avatar"attributeSelects the component on figure

.small / .largeclasssize-6 / size-10 like shadcn

[data-size="sm|lg"]attributeAlternate size API — data-size mirrors shadcn prop

role="group"attributeStacked group with overlap

[data-badge]attributeAbsolute status dot/plus on the avatar corner

--mo-avatar-sizetokenExplicit size override

FILES

src/css/avatar.css

Install:mo add avatar

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--background--muted--muted-foreground--primary--primary-foreground--radius--success--warning

Component hooks

--mo-avatar-size

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.