labsUI

Avatar

Image with initials fallback on error, three sizes and online/away/busy/offline dots.

npx @kznlabs/labsui add avatar
onlinebusyawayoffline
  • +2 more
import { Bot } from "lucide-react";import { Avatar } from "@/components/ui/avatar";export function User() {  return (    <Avatar      src="/jane.png"      alt="Jane Doe"      status="online"      size="lg"      fallback={<Bot />}    />  );}

<Avatar>

  • alt*
    string

    Person's name: used for alt text and initials fallback.

  • fallback
    ReactNode

    Overrides initials (text or icon).

  • sizedefault "default"
    "sm" | "default" | "lg"

    Diameter.

  • src
    string

    Image URL; fallback or initials show while it loads or if it fails.

  • status
    "online" | "away" | "busy" | "offline"

    Presence dot in the corner, announced with the name.

PropTypeDefault
alt*

Person's name: used for alt text and initials fallback.

string—
fallback

Overrides initials (text or icon).

ReactNode—
size

Diameter.

"sm" | "default" | "lg""default"
src

Image URL; fallback or initials show while it loads or if it fails.

string—
status

Presence dot in the corner, announced with the name.

"online" | "away" | "busy" | "offline"—

* required. Every component also takes className.