Surfaces
Avatar
A square portrait. Initials stand in until the image loads.
JDM8+3
npx shadcn@latest add https://ui.netm8.com/r/avatar.json@base-ui/react
Surfaces
A square portrait. Initials stand in until the image loads.
npx shadcn@latest add https://ui.netm8.com/r/avatar.jsonimport { Avatar, AvatarFallback } from "@/components/ui/avatar"
export default function AvatarDemo() {
return (
<div className="flex items-center gap-3">
<Avatar>
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<Avatar className="size-12 border-lamp text-lamp">
<AvatarFallback>M8</AvatarFallback>
</Avatar>
<Avatar className="size-7">
<AvatarFallback>+3</AvatarFallback>
</Avatar>
</div>
)
}