Avatar

Variants

Every vocabulary variant on the default tone. Omit variant to follow the ambient design style.

import { Avatar } from "@glinui/ui"
export function AvatarVariantsDemo() {
  return (

import { Avatar } from "@glinui/ui"


export function AvatarVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Avatar variant="glinr" fallback="GL" />
      <Avatar variant="solid" fallback="GL" />
      <Avatar variant="plain" fallback="GL" />
      <Avatar variant="soft" fallback="GL" />
      <Avatar variant="outline" fallback="GL" />
      <Avatar variant="ghost" fallback="GL" />
      <Avatar variant="gradient" fallback="GL" />
    </div>
  )
}

Sizes and shapes

Six sizes, three radii, rings and presence.

import { Avatar } from "@glinui/ui"
export function Demo() {
  return (

import { Avatar } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-6">
      <div className="flex flex-wrap items-end gap-4">
        {(["xs", "sm", "md", "lg", "xl", "2xl"] as const).map((size) => (
          <Avatar key={size} size={size} fallback="MK" tone="accent" />
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Avatar size="lg" fallback="AB" radius="lg" tone="info" />
        <Avatar size="lg" fallback="CD" radius="md" tone="success" />
        <Avatar size="lg" fallback="EF" status="online" ring />
        <Avatar size="lg" fallback="GH" status="busy" variant="soft" tone="danger" />
      </div>
    </div>
  )
}

In a layout

A members list with roles and presence.

import {
  Avatar,
  Button,

import {
  Avatar,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Separator
} from "@glinui/ui"


export function Demo() {
  const members = [
    { initials: "MK", name: "Maya Kovacs", role: "Owner", status: "online" as const, tone: "accent" as const },
    { initials: "JO", name: "Jonas Okafor", role: "Admin", status: "away" as const, tone: "success" as const },
    { initials: "PN", name: "Priya Nair", role: "Editor", status: "online" as const, tone: "info" as const },
    { initials: "DA", name: "Diego Alvarez", role: "Viewer", status: "offline" as const, tone: "warning" as const }
  ]
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Members</CardTitle>
        <CardDescription>People with access to this workspace.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col">
        {members.map((member, index) => (
          <div key={member.name}>
            {index > 0 ? <Separator /> : null}
            <div className="flex items-center gap-3 py-3">
              <Avatar fallback={member.initials} tone={member.tone} status={member.status} />
              <div className="flex min-w-0 flex-1 flex-col">
                <span className="truncate text-sm font-medium">{member.name}</span>
                <span className="text-xs text-[var(--color-muted)]">{member.role}</span>
              </div>
              <Button variant="ghost" size="sm">Manage</Button>
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  )
}

With Images

import { Avatar } from "@glinui/ui"

export function AvatarImagesDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar src="https://api.dicebear.com/9.x/adventurer/svg?seed=Nova" alt="Nova" variant="default" />
      <Avatar src="https://api.dicebear.com/9.x/lorelei/svg?seed=Kai" alt="Kai" variant="glass" />
      <Avatar src="https://api.dicebear.com/9.x/bottts/svg?seed=Glin" alt="Glin" variant="liquid" />
      <Avatar src="https://api.dicebear.com/9.x/pixel-art/svg?seed=Leo" alt="Leo" variant="matte" />
      <Avatar src="https://api.dicebear.com/9.x/thumbs/svg?seed=Aria" alt="Aria" variant="glow" />
    </div>
  )
}

Sizes

Six sizes from xs (24px) to 2xl (80px).

import { Avatar } from "@glinui/ui"

export function AvatarSizeDemo() {
  return (
    <div className="flex items-end gap-3">
      <Avatar size="xs" fallback="XS" alt="Extra small" />
      <Avatar size="sm" fallback="SM" alt="Small" />
      <Avatar size="md" fallback="MD" alt="Medium" />
      <Avatar size="lg" fallback="LG" alt="Large" />
      <Avatar size="xl" fallback="XL" alt="Extra large" />
      <Avatar size="2xl" fallback="2X" alt="Double extra large" />
    </div>
  )
}

Radius Styles

import { Avatar } from "@glinui/ui"

export function AvatarRadiusDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar radius="full" fallback="FU" variant="glass" />
      <Avatar radius="lg" fallback="LG" variant="glass" />
      <Avatar radius="md" fallback="MD" variant="glass" />
      <Avatar radius="square" fallback="SQ" variant="glass" />
    </div>
  )
}

Status Indicator

Show online, offline, busy, or away status with an auto-positioned dot.

Avatar Group

Stack avatars with overlap. Set `max` to cap visible count with a `+N` overflow indicator.

Glass Variants with Status

Combine glass surfaces with status indicators for rich profile displays.

import { Avatar } from "@glinui/ui"

export function AvatarGlassStatusDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar src="..." alt="Nova" variant="glass" size="lg" status="online" />
      <Avatar src="..." alt="Kai" variant="liquid" size="lg" status="away" />
      <Avatar src="..." alt="Glin" variant="matte" size="lg" status="busy" />
      <Avatar src="..." alt="Leo" variant="glow" size="lg" status="offline" />
    </div>
  )
}

Copy-Paste Recipes

Drop these Tailwind classes directly into your markup for common avatar patterns.

Image Error Recovery

A broken image source falls back instantly, and if `src` later changes to a valid URL, the image renders again.

import { Avatar } from "@glinui/ui"

export function AvatarErrorDemo() {
  return (
    <div className="flex items-center gap-3">
      <Avatar src="/broken-src.png" alt="Broken" fallback="BR" variant="matte" />
      <Avatar src="https://api.dicebear.com/9.x/adventurer/svg?seed=Replaced" alt="Recovered" variant="glass" />
    </div>
  )
}

ARIA Attributes

• `role="img"` on image
• `aria-label` on status dot

Affected properties