@mshafiqyajid/react-avatar
Headless avatar hook and styled component. Image with initials fallback, status indicator, circle/square shape, group stacking with overflow count.
Playground #
SY
Props
TSX
import { AvatarStyled } from "@mshafiqyajid/react-avatar/styled";
import "@mshafiqyajid/react-avatar/styles.css";
<AvatarStyled
name="Shafiq Yajid"
/>Install #
npm install @mshafiqyajid/react-avatarQuick start #
import { AvatarStyled, AvatarGroup } from "@mshafiqyajid/react-avatar/styled";
import "@mshafiqyajid/react-avatar/styles.css";
<AvatarStyled src="/photo.jpg" name="Shafiq Yajid" status="online" />
// Group
<AvatarGroup max={3}>
<AvatarStyled name="Alice" />
<AvatarStyled name="Bob" />
<AvatarStyled name="Charlie" />
<AvatarStyled name="Dave" />
</AvatarGroup>API #
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL |
| name | string | — | Name for initials fallback |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size |
| shape | "circle" | "square" | "circle" | Shape |
| status | "online" | "offline" | "busy" | "away" | — | Presence indicator dot |
| border | boolean | false | White border ring |
| fallback | ReactNode | — | Custom fallback content |
| color | string | — | Custom background color e.g. "#6366f1" |
| onClick | () => void | — | Makes avatar clickable with hover effect |