Avatar

npx shadcn@latest add https://ui.saasflare.io/r/avatar.json

pnpm add @saasflare/ui

"use client"import { Avatar, AvatarFallback, AvatarImage } from "@saasflare/ui"/** An avatar with an image and initials fallback. */export function Demo() {    return (        <Avatar>            <AvatarImage src="https://i.pravatar.cc/96?img=12" alt="Maya Chen" />            <AvatarFallback>MC</AvatarFallback>        </Avatar>    )}

"use client"import {    Avatar,    AvatarFallback,    AvatarGroup,    AvatarGroupCount,    AvatarImage,} from "@saasflare/ui"/** A stacked avatar group with an overflow count — useful for team rosters. */export function Demo() {    return (        <AvatarGroup>            <Avatar>                <AvatarImage src="https://i.pravatar.cc/96?img=11" alt="Liam Park" />                <AvatarFallback>LP</AvatarFallback>            </Avatar>            <Avatar>                <AvatarImage src="https://i.pravatar.cc/96?img=32" alt="Noah Kim" />                <AvatarFallback>NK</AvatarFallback>            </Avatar>            <Avatar>                <AvatarImage src="https://i.pravatar.cc/96?img=47" alt="Sofia Diaz" />                <AvatarFallback>SD</AvatarFallback>            </Avatar>            <AvatarGroupCount>+5</AvatarGroupCount>        </AvatarGroup>    )}

"use client"import { Avatar, AvatarFallback, AvatarImage } from "@saasflare/ui"/** The three avatar sizes — sm, default, and lg. */export function Demo() {    return (        <div className="flex items-center gap-4">            <Avatar size="sm">                <AvatarImage src="https://i.pravatar.cc/96?img=5" alt="Ava Reyes" />                <AvatarFallback>AR</AvatarFallback>            </Avatar>            <Avatar size="md">                <AvatarImage src="https://i.pravatar.cc/96?img=5" alt="Ava Reyes" />                <AvatarFallback>AR</AvatarFallback>            </Avatar>            <Avatar size="lg">                <AvatarImage src="https://i.pravatar.cc/96?img=5" alt="Ava Reyes" />                <AvatarFallback>AR</AvatarFallback>            </Avatar>        </div>    )}