Skip to main content
Avatar component preview (light)
  • Location: sabo/src/components/ui/avatar.tsx

​
When to use

  • Display user or entity images with a built‑in fallback (initials/icon).
  • Use in lists, headers, comments, or profile menus.

​
Usage

sabo/src/components/ui/avatar.tsx
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Avatar>
        <AvatarImage src="/users/jane.jpg" alt="Jane Cooper" />
        <AvatarFallback>JC</AvatarFallback>
      </Avatar>
      <span>Jane Cooper</span>
    </div>
  );
}

​
Key props

​
AvatarImage.src
string
Image URL. If it fails to load, the fallback is shown.
​
AvatarImage.alt
string
Accessible alternative text describing the user/image.
​
className
string
Use Tailwind to change size (size-6, size-10), ring, or border.
This component forwards all props from Radix Avatar primitives (Root/Image/Fallback). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/avatar

​
Styling tip

  • Add a ring: className=“ring-2 ring-primary” on Avatar.
  • Use aspect‑square containers; Avatar is circular by default.

​
Accessibility

  • Always set meaningful alt on AvatarImage.
  • Provide visible labels nearby for context (name/role).