Components
Vercel Avatars
Generative halftone-pattern avatars for team and user lists. Click any avatar to download as SVG, or grab the full set in one tap. 12 color presets, full light and dark mode support.
import {
AVATAR_PRESETS,
VercelAvatars,
type TeamMember,
} from "@/components/ui/vercel-avatars"
const team: TeamMember[] = [
{ name: "Maya Chen", preset: AVATAR_PRESETS.neonLime },
{ name: "Noah Kim", preset: AVATAR_PRESETS.electricViolet },
{ name: "Ava Patel", preset: AVATAR_PRESETS.cyberPink },
{ name: "Leo Garcia", preset: AVATAR_PRESETS.hyperBlue },
{ name: "Zoe Smith", preset: AVATAR_PRESETS.solarGold },
{ name: "Eli Brown", preset: AVATAR_PRESETS.aquaMint },
{ name: "Nina Rossi", preset: AVATAR_PRESETS.royalIndigo },
{ name: "Owen Lee", preset: AVATAR_PRESETS.coralPeach },
]
export default function DefaultDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<VercelAvatars members={team} />
</div>
)
}