104Get started
HextaUI

Avatar: Initials

getInitials() picks the first and last initial. It handles email addresses, emoji, CJK and RTL names, combining marks, and names with no letters at all.

  • ALAda Lovelace
  • MMadonna
  • JPjean-luc picard
  • AL[email protected]
  • AJ(Admin) John
  • 👩‍👩‍👧‍👦F👩‍👩‍👧‍👦 Family
  • 山太山田 太郎
  • معمحمد علي
  • ZTZ̷̢̛͖͓̰̈́algo T̵ext
  • MCMary Ann Evans Cross
  • !!! ???
  • (empty)
"use client"

import { Avatar, AvatarFallback, getInitials } from "@/components/ui/avatar"

const names = [
  "Ada Lovelace",
  "Madonna",
  "jean-luc picard",
  "[email protected]",
  "(Admin) John",
  "👩‍👩‍👧‍👦 Family",
  "山田 太郎",
  "محمد علي",
  "Z̷̢̛͖͓̰̈́algo T̵ext",
  "Mary Ann Evans Cross",
  "!!! ???",
  "",
]

export function AvatarInitials() {
  return (
    <ul className="grid w-full max-w-md grid-cols-1 gap-2 sm:grid-cols-2">
      {names.map((name) => (
        <li key={name} className="flex min-w-0 items-center gap-2 text-sm">
          <Avatar>
            <AvatarFallback>{getInitials(name)}</AvatarFallback>
          </Avatar>
          <span className="min-w-0 truncate text-muted-foreground">
            {name || "(empty)"}
          </span>
        </li>
      ))}
    </ul>
  )
}

Add this example

This adds the example as components/examples/avatar/initials.tsx, together with the Avatar component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/avatar-initials.json

To add only the component, follow the Avatar installation.

More Avatar examples

See them all, with keyboard support and accessibility notes, on the Avatar page.

Related components