Avatar
A user avatar component with image, fallback, badge, and group support.
CG
Installation
pnpm dlx stera-ui add avatarUsage
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"<Avatar>
<AvatarImage src="/avatar.jpg" alt="Jane Appleseed" />
<AvatarFallback>JA</AvatarFallback>
</Avatar>Fallback Only
JD
Sizes
CGCGCG
| Size | Description |
|---|---|
sm | Small |
default | Medium (default) |
lg | Large |
Shapes
CGCG
| Shape | Description |
|---|---|
circle | Circular (default) |
square | Rounded square |
With Badge
CGCGCGCGCG
| Badge Variant | Description |
|---|---|
subtle | Neutral indicator |
success | Online / active |
danger | Busy / unavailable |
warning | Away |
icon | Custom icon inside badge |
Icon Fallback
Avatar Group
CGLRJD
+4
API Reference
Avatar
| Prop | Type | Default |
|---|---|---|
size | "sm" | "default" | "lg" | "default" |
shape | "circle" | "square" | "circle" |
AvatarBadge
| Prop | Type | Default |
|---|---|---|
variant | "subtle" | "success" | "danger" | "warning" | "icon" | "subtle" |