Primitive / Atomstable

Avatar

Profile image with SVG-ready sources, fallback rendering, and multiple glass-aware surface variants.

@glinui/uiComponent: avatar

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add avatar

Usage

Glass Variants

DFGLLQMTGW

TSX

1import { Avatar } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex items-center gap-4">
6      <Avatar fallback="DF" variant="default" />
7      <Avatar fallback="GL" variant="glass" />
8      <Avatar fallback="LQ" variant="liquid" />
9      <Avatar fallback="MT" variant="matte" />
10      <Avatar fallback="GW" variant="glow" />
11    </div>
12  )
13}

Status & Group

ONAWBS

ABC+1

TSX

1import { Avatar, AvatarGroup } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-4">
6      <div className="flex gap-4">
7        <Avatar fallback="ON" variant="glass" status="online" />
8        <Avatar fallback="AW" variant="glass" status="away" />
9        <Avatar fallback="BS" variant="glass" status="busy" />
10      </div>
11      <AvatarGroup max={3}>
12        <Avatar fallback="A" />
13        <Avatar fallback="B" />
14        <Avatar fallback="C" />
15        <Avatar fallback="D" />
16      </AvatarGroup>
17    </div>
18  )
19}

Accessibility

Image alt text provided via `alt` prop.
Fallback text rendered when image fails to load.
Status indicators include `aria-label` for screen readers.

ARIA Attributes

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

Reduced Motion

Hover transitions respect `prefers-reduced-motion`.

Affected properties

transformbox-shadow

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "liquid" \| "matte" \| "glow" \| "outline" \| "ghost"`	No	`default`	Visual surface treatment.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	No	`md`	Dimensions: xs=24px, sm=32px, md=40px, lg=48px, xl=56px, 2xl=80px.
`radius`	`"full" \| "lg" \| "md" \| "square"`	No	`full`	Corner radius style.
`src`	`string`	No	`-`	Image URL.
`alt`	`string`	No	`""`	Alt text; first char used as fallback.
`fallback`	`string`	No	`-`	Explicit fallback text (overrides alt).
`status`	`AvatarStatus`	No	`-`	Status indicator dot.
`ring`	`boolean`	No	`false`	Add ring for grouped/emphasized avatars.
`fallbackClassName`	`string`	No	`-`	Auto-generated from TypeScript source.
`imgClassName`	`string`	No	`-`	Auto-generated from TypeScript source.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Avatar } from "@glinui/ui"

Source Files

avatar.tsx

avatar.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/avatar.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

AvatarProps

`AvatarGroupProps`

Prop	Type	Required	Default	Description
`max`	`number`	No	`-`	Max avatars to show before +N overflow
`spacing`	`"tight" \| "normal" \| "loose"`	No	`"normal"`	Overlap spacing

`AvatarProps`

Prop	Type	Required	Default	Description
`alt`	`string`	No	`""`	-
`fallback`	`string`	No	`-`	-
`fallbackClassName`	`string`	No	`-`	-
`imgClassName`	`string`	No	`-`	-
`radius`	`"full" \| "lg" \| "md" \| "square"`	No	`"full"`	Variant option from avatarVariants.
`ring`	`boolean`	No	`-`	Ring color for grouped avatars or emphasis
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	No	`"md"`	Variant option from avatarVariants.
`src`	`string`	No	`-`	-
`status`	`AvatarStatus`	No	`-`	Online/offline status indicator
`variant`	`"default" \| "glass" \| "liquid" \| "matte" \| "glow" \| "outline" \| "ghost"`	No	`"default"`	Variant option from avatarVariants.