Browse components
Avatar
Profile picture that fades in once loaded, falls back to colorful initials, and shows an optional presence dot.
Installation
npx shadcn@latest add @glint-ui/avatarFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/avatar.json
Usage
import { Avatar } from "@/components/ui/avatar";
<Avatar src="/maya.jpg" name="Maya Chen" status="online" size="lg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL. Falls back to initials while loading or on error. |
| name | string | — | Person's name: accessible label and initials. |
| size | "sm" | "md" | "lg" | "xl" | "md" | 32, 40, 56 or 80 px. |
| shape | "circle" | "square" | "circle" | Round or squircle-ish corners. |
| status | "online" | "away" | "busy" | "offline" | — | Presence dot; online pulses. |
| className | string | — | Extra classes for the root element. |