Avatar
安装
npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/avatar.jsonyarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/avatar.jsonpnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/avatar.jsonbunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/avatar.json参考
示例
CZEZ
CZEZJW
import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ssp/ui/avatar"export default function Example() {return ( <div className='flex flex-row flex-wrap items-center gap-12'> <Avatar> <AvatarImage src='https://github.com/shczhen.png' alt='@shczhen' /> <AvatarFallback>CZ</AvatarFallback> </Avatar> <Avatar className='rounded-lg'> <AvatarImage src='https://github.com/plutoless.png' alt='@plutoless' /> <AvatarFallback>EZ</AvatarFallback> </Avatar> <div className='-space-x-2 flex *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale'> <Avatar> <AvatarImage src='https://github.com/shczhen.png' alt='@shczhen' /> <AvatarFallback>CZ</AvatarFallback> </Avatar> <Avatar> <AvatarImage src='https://github.com/plutoless.png' alt='@plutoless' /> <AvatarFallback>EZ</AvatarFallback> </Avatar> <Avatar> <AvatarImage src='https://github.com/littleDogWang.png' alt='@littleDogWang' /> <AvatarFallback>JW</AvatarFallback> </Avatar> </div> </div>)}