Avatar
A 5 x 5 mirrored pixel pattern derived from seed (same seed, same pattern), drawn in the text color with one accent pixel. Used as the avatar fallback; also handy as a placeholder anywhere.
import { Avatar, AvatarGroup } from "pixelbits/avatar";
export default function Demo() {
return (
<div className="flex items-center gap-6">
<Avatar name="Ali Moradi" size="lg" status="online" />
<Avatar name="Karen Ross" size="lg" fallback="initials" />
<AvatarGroup max={3}>
<Avatar name="Noah Kim" />
<Avatar name="Sara Ahmadi" />
<Avatar name="Leo Park" />
<Avatar name="Mina Rahimi" />
</AvatarGroup>
</div>
);
}Installation
import { Avatar, AvatarGroup } from "pixelbits/avatar";npx shadcn add https://pixelbits.ali-moradi-develop.com/r/avatar.jsonAPI
<PixelIdenticon>
A 5 x 5 mirrored pixel pattern derived from seed (same seed, same pattern), drawn in the text color with one accent pixel. Used as the avatar fallback; also handy as a placeholder anywhere.
<Avatar>
A person's picture, square with a 2 px radius like the rest of the kit. Without a photo it shows a pixel identicon unique to the name (or the initials).
<Avatar name="Ali Moradi" src="/ali.jpg" status="online" />
<Avatar name="Karen Ross" fallback="initials" />| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | — | The person's name: the accessible label, and the seed of the fallback. |
| src | string | — | Photo URL. If missing or broken, the pixel identicon is shown. |
| size | "sm" | "md" | "lg" | "xl" | "md" |
|
| fallback | "identicon" | "initials" | "identicon" | What to show without a photo: a pixel identicon of the name, or the initials. |
| status | "online" | "away" | "busy" | — | A small square in the corner, e.g. |
| children | ReactNode | — | Overrides the visible fallback content entirely. |
Also accepts every prop of HTMLAttributes<HTMLSpanElement>.
<AvatarGroup>
Overlapping avatars for a team or the people on a document.
<AvatarGroup max={3}>{people.map((p) => <Avatar key={p.id} name={p.name} src={p.photo} />)}</AvatarGroup>| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 4 | Show at most this many avatars, then a |
| children* | ReactNode | — |
|
Also accepts every prop of HTMLAttributes<HTMLDivElement>.