SurfacesNew
Glass Avatar
A round photo that falls back to coloured initials, with a presence dot and stacked groups.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-avatarnpx shadcn@4.14.1 add @glassyui-native/glass-avatarPreview
Demos ready. Update 0.
This preview runs the React version. In an app, iOS 26 and later draw the React Native version with the system’s own Liquid Glass. See it on a phone.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-avatarWhat this installs5 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-avatar itself in registry.json.
Package dependencies
@radix-ui/react-avatarclsx
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-avatarclsx
Installed files
components/glassyui/glass-avatar.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:
npx shadcn@4.14.1 add @glassyui-native/glass-avatarnpx expo install --fixUsage
import { GlassAvatar } from "@/components/glassyui/glass-avatar";
export function PersonDemo() {
return <GlassAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />;
}import { View } from 'react-native';
import { GlassAvatar, GlassAvatarGroup } from '@/components/glassyui/glass-avatar';
const TEAM = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Katherine Johnson'];
export default function AvatarExample() {
return (
<View style={{ alignItems: 'center', flexDirection: 'row', gap: 16 }}>
{/* Pass src or source for a photo; the initials show until it loads. */}
<GlassAvatar name="Morgan Lee" size="lg" status="online" />
<GlassAvatarGroup accessibilityLabel="Team" max={3}>
{TEAM.map((name) => (
<GlassAvatar key={name} name={name} />
))}
</GlassAvatarGroup>
</View>
);
}
Examples
<GlassAvatarGroup max={4} aria-label="Team">
{people.map((person) => (
<GlassAvatar key={person} name={person} />
))}
</GlassAvatarGroup>API
The React Native version takes the same props under React Native’s names: onPress for onClick and style for className. The Expo guide lists what else differs.
GlassAvatarA Radix avatar with glass rim, coloured initials and a status dot.
nameNames the person. Its initials fill in for a missing image and pick a stable colour.
src / altThe photo and its description. alt defaults to name.
fallbackReplaces the initials.
sizexs, sm, md (default), lg or xl.
statusonline, away, busy or offline: a presence dot on the corner.
GlassAvatarGroupStacks 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.