Components
A graphical representation of a user or profile.
A
Installation
npm install @mijn-ui/react-avatarUsage
import { Avatar, AvatarFallback, AvatarImage } from "@mijn-ui/react-avatar"<Avatar>
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>Avatar Sizes
2xs2xs
xsxs
smsm
mdmd
lglg
xlxl
Avatar Group
AnthonySusieJohn Doe+3
API Reference
Built on Radix UI — all underlying primitive props are forwarded in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size of the avatar. |
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
Avatar Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | Avatar | Styles the root Avatar component. |
image | AvatarImage | Styles the avatar image. |
fallback | AvatarFallback | Styles the fallback content when the image is missing. |