npx shadcn@latest add https://components.bksh.site/r/avatar.json

Avatar

Deterministic avatars from any seed — DiceBear CC0 art styles or an abstract shader gradient.

Example.tsx

import { Avatar } from "@/components/better/avatar"

// npm i @dicebear/core @dicebear/collection
// Same seed always renders the same avatar.

export function Example() {
  return (
    <Avatar
      seed="bikash"
      style="gradient"
      size={96}
      round={true}
      speed={0}
    />
  )
}

Dependencies

@dicebear/core @dicebear/collection @paper-design/shaders-react

Props

<Avatar />

Prop	Type	Default	Description
seed*	string	—	Same seed → same avatar, always. Use a user id, email, or handle.
style	AvatarStyle	"gradient"
size	number	64	Side of the square avatar box, in px.
round	boolean	true	Rounded-full by default; set false for a squircle.
speed	number	0	Gradient style only: 0 leaves the shader frozen on its first frame.
className	string	—

<AvatarPicker />

Prop	Type	Default	Description
defaultSeed	string	—	Seed to start on; a random one is drawn if omitted.
defaultStyle	AvatarStyle	"gradient"
styles	readonly AvatarStyle[]	AVATAR_STYLES	Styles offered in the row of swatches.
size	number	96
onChange	(value: { seed: string; style: AvatarStyle }) => void	—	Fires whenever the user lands on a different avatar.
className	string	—