Avatar

Comparación entre la versión Astro (Saastro) y React (shadcn/ui)

🚀 saastro/ui (Astro)

CN

⚛️ shadcn/ui (React)

Installation

pnpm dlx saastro add avatar

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add avatar --yes

pnpm add tailwind-variants

Usage

---
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui-saastro/avatar"
---

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

Basic

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

With Custom Size

Use Tailwind classes to customize the size.

<Avatar class="size-12">
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Fallback Only

When no image is provided, the fallback is shown.

<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Multiple Avatars

<div class="flex -space-x-2">
  <Avatar class="border-2 border-background">
    <AvatarImage src="/avatar1.jpg" alt="User 1" />
    <AvatarFallback>U1</AvatarFallback>
  </Avatar>
  <Avatar class="border-2 border-background">
    <AvatarImage src="/avatar2.jpg" alt="User 2" />
    <AvatarFallback>U2</AvatarFallback>
  </Avatar>
  <Avatar class="border-2 border-background">
    <AvatarImage src="/avatar3.jpg" alt="User 3" />
    <AvatarFallback>U3</AvatarFallback>
  </Avatar>
</div>

Props

Avatar

AvatarImage

AvatarFallback

Accessibility

• Always provide meaningful alt text for avatar images
• Fallback text should be short (1-2 characters, typically initials)
• Consider using aria-label on the Avatar for additional context