elorm/ui

Navii Avatar

Deterministic mascot avatar powered by Navii.

Saved preference for elorm init --ui-library base-ui
AliceBobCarol
PreviewCode
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { NaviiAvatar } from "@/components/ui/navii-avatar"

export function NaviiAvatarDemo() {
  return (
    <div className="flex items-center gap-4">
      <NaviiAvatar seed="alice@example.com" animated title="Alice" />
      <NaviiAvatar seed="bob@example.com" animated title="Bob" />
      <Avatar>
        <AvatarImage src="/does-not-exist.png" alt="Carol" />
        <AvatarFallback className="p-0">
          <NaviiAvatar seed="carol@example.com" size={36} title="Carol" />
        </AvatarFallback>
      </Avatar>
    </div>
  )
}

Installation#

Usage#

import { NaviiAvatar } from "@/components/ui/navii-avatar"

Deterministic mascot avatar powered by Navii.

Pass a stable seed (user id, UUID, or email). Same seed always produces the same mascot.

Examples#

Default#

Alice
PreviewCode
import { NaviiAvatar } from "@/components/ui/navii-avatar"

export function NaviiAvatarDemo() {
  return (
    <NaviiAvatar seed="alice@example.com" animated />
  )
}

Photo fallback#

Carol
PreviewCode
import { NaviiAvatar } from "@/components/ui/navii-avatar"

export function NaviiAvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src={user.photoUrl} alt={user.name} />
      <AvatarFallback className="p-0">
        <NaviiAvatar seed={user.id} size={36} />
      </AvatarFallback>
    </Avatar>
  )
}
AvatarProgress