Vercel Avatars

Component 7

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Vercel Avatars to your project and fits it to your theme.

Code

How Vercel Avatars is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}