soultelui
← Components

Avatar Generator

component

Deterministic avatars from any seed string. Gradient, blocks, and rings variants.

Variants

gradient
blocks
rings

Installation

Namespace
npx shadcn@latest add @soultel/avatar-generator
URL
npx shadcn@latest add https://asafefe.dev/r/avatar-generator.json

Usage

usage.tsx
import { AvatarGenerator } from "@/components/avatar-generator"

export function Example() {
  return <AvatarGenerator seed="soultel" variant="gradient" />
}

Notes

The same seed always produces the same avatar, so a user id or email gives every account a stable identity with no image hosting. Nothing is random at render time, which means it is safe for server rendering.

Props

PropTypeDefault
seedstringrequired
variantgradient blocks ringsgradient
sizenumber56

How it works

A small hash turns the seed into a few hue values. gradient maps them to a two stop linear gradient, blocks builds a mirrored identicon, and rings draws concentric circles. Swap the hash or the hue math if you want a different palette across your whole app.