Avatar
An image element with a fallback for representing the user. Built on Base UI Avatar primitive.
CN
Installation
npx shadcn add avatar --registry https://ui.ch.sh/r
Usage
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
export default function Example() {
return (
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)
}Examples
Sizes
SMMDLG
Group
ABC