How do I install the dither avatar?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Is the avatar deterministic?

Yes. The same name always gives the same avatar.

Dither Avatar

Q: What does it look like?

A left-right mirrored grid of solid and checker-dithered cells in one of nine colors.

A pixel-art avatar generated from a name: a left-right mirrored grid of solid and checker-dithered cells in one of nine colors, the same every time for the same name. Avatars pop in with a spring; hover one and it tilts up while its dithered cells flip their checker phase. Reduced motion skips the pop and the tilt.

pnpm dlx shadcn@latest add @ditherui/dither-avatar

Install

$ pnpm dlx shadcn@latest add @ditherui/dither-avatar

Props

PropTypeDefault

namestring—

sizenumber48

animatedbooleantrue

classNamestring—

When to use the dither avatar

Use it to give users a default avatar without uploads. It generates a pixel-art avatar from a name, the same every time for the same name.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

AC
MR
PN
+2
AvatarAvatars with fallbacks, status dots and stacked groups.
SelectAn animated select menu with a sliding active highlight.
Accept terms
CheckboxCheckboxes whose tick draws itself in.