Command Palette

Search for a command to run...

Avatar

shadcn/ui

An image element with a fallback for representing the user.

Avatar
opticsOP
AMCLC
Agus MayolAMCLC AutomationCLCOpticsOP
+3

import { Avatar, AvatarBadge, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarFallback, AvatarStack } from "@/components/optics/avatar";<div className="flex flex-col gap-6">  <div className="flex items-center gap-4">    <Avatar title="Optics">      <AvatarImage        alt="optics"        src="/images/logo.svg"      />      <AvatarFallback>        OP      </AvatarFallback>    </Avatar>    <AvatarStack      data={[        {          fallback: 'AM',          image: 'https://github.com/agusmayol.png',          title: 'Agus Mayol'        },        {          fallback: 'CLC',          image: 'https://github.com/clcautomation.png',          title: 'CLC Automation'        }      ]}     />  </div>  <div className="flex items-center gap-2">    <AvatarGroup>      <Avatar title="Agus Mayol">        <AvatarImage          alt="Agus Mayol"          src="https://github.com/agusmayol.png"        />        <AvatarFallback>          AM        </AvatarFallback>        <AvatarBadge aria-label="Online" />      </Avatar>      <Avatar title="CLC Automation">        <AvatarImage          alt="CLC Automation"          src="https://github.com/clcautomation.png"        />        <AvatarFallback>          CLC        </AvatarFallback>      </Avatar>      <Avatar title="Optics">        <AvatarImage          alt="Optics"          src="/images/logo.svg"        />        <AvatarFallback>          OP        </AvatarFallback>        <AvatarBadge aria-label="Do not disturb" />      </Avatar>    </AvatarGroup>    <AvatarGroupCount aria-label="Three more people">      +3    </AvatarGroupCount>  </div></div>

Installation

pnpm dlx shadcn@latest add @optics/avatar

Props

<Avatar />
Name
Type
tooltipSide
string(default: top)
tooltipSideOffset
number(default: 4)
tooltipAlign
string(default: center)
tooltipAlignOffset
number(default: 0)
render
React.ReactElement
onLoadingStatusChange
(...args) => void
delay
number

<AvatarStack />
Name
Type
data
string(default: [])
render
React.ReactElement
onLoadingStatusChange
(...args) => void
delay
number
<AvatarImage />
Name
Type
render
React.ReactElement
onLoadingStatusChange
(...args) => void
delay
number
<AvatarFallback />
Name
Type
render
React.ReactElement
onLoadingStatusChange
(...args) => void
delay
number
<AvatarGroup />
Name
Type
render
React.ReactElement
onLoadingStatusChange
(...args) => void
delay
number
<AvatarGroupCount />
Name
Type
render
React.ReactElement
onLoadingStatusChange
(...args) => void
delay
number
<AvatarBadge />
Name
Type
render
React.ReactElement
onLoadingStatusChange
(...args) => void
delay
number
Aspect RatioBadge