Dither Avatars
Avatars in halftone dither that resolve into photos on hover.
import { DitherAvatars } from "@/components/dither-avatars";
export function Members() {
return (
<DitherAvatars
people={[
{ href: "/u/maya", name: "Maya Chen", src: "/avatars/maya.jpg" },
{ name: "Theo Laurent", src: "/avatars/theo.jpg" },
{ name: "Ana Ruiz", src: "/avatars/ana.jpg" },
]}
max={5}
/>
);
}
Installation
pnpm dlx shadcn@latest add @gradients-pro/dither-avatarsNeeds a Pro account and the Pro registry setup.
Usage
import { DitherAvatars } from "@/components/dither-avatars";
<DitherAvatars people={[{ name: "Maya Chen", src: "/avatars/maya.jpg" }]} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
people | DitherAvatarPerson[] | required | The people to show, in order: name, src and an optional href, which makes the avatar a link. |
max | number | 5 | Avatars shown before the +N chip. |
size | number | 36 | Diameter in CSS pixels. |
palette | "ultramarine" | "ember" | "mono" | string[] | "mono" | A curated ramp, or your own 2 to 6 CSS colours from faint to hot (var(--x) included). Curated ramps switch between a light and a dark version with your theme. |
cell | number | 1 | Size of one dither cell in CSS pixels. |
scheme | "light" | "dark" | follows the page | Forces a colour scheme. By default it reads a dark or light class (or data-theme) on <html>, then the system setting. |
crossOrigin | "anonymous" | "use-credentials" | none | Passed to each <img>; needed for images on another origin. |
className, other ul props | Passed to the list. |