Glass Avatar for React

Preview

Demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Avatar

pnpm dlx shadcn@4.14.1 add @glassyui/glass-avatar

What this installs5 files, 2 packages

Direct registry declarations

These values belong to @glassyui/glass-avatar itself in registry.json.

Package dependencies

@radix-ui/react-avatar
clsx

Registry dependencies

@glassyui/glass-provider

File targets

components/glassyui/glass-avatar.tsx

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

@radix-ui/react-avatar
clsx

Installed files

components/glassyui/glass-avatar.tsx
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassAvatar } from "@/components/glassyui/glass-avatar";

export function PersonDemo() {
  return <GlassAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />;
}

Examples

A stacked group

<GlassAvatarGroup max={4} aria-label="Team">
  {people.map((person) => (
    <GlassAvatar key={person} name={person} />
  ))}
</GlassAvatarGroup>

API

GlassAvatar

A Radix avatar with glass rim, coloured initials and a status dot.

name

Names the person. Its initials fill in for a missing image and pick a stable colour.

src / alt

The photo and its description. alt defaults to name.

fallback

Replaces the initials.

size

xs, sm, md (default), lg or xl.

status

online, away, busy or offline: a presence dot on the corner.

GlassAvatarGroup

Stacks avatars edge to edge. max shows a +N for the rest; size sizes all of them.

Notes

Cut, not ringed

A status dot or an overlapping neighbour cuts the circle away with a mask instead of drawing a ring in a background colour, so it works over any glass or wallpaper.

Accessibility

The avatar is one image named by alt or name, plus its status. Initials are hidden from assistive technology.

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.