Avatar

安装

npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/avatar.json
yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/avatar.json
pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/avatar.json
bunx 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>)}