Avatar

Componente de avatar de usuario con imagen y fallback

Componente avatar construido con Ark UI que admite imagen y contenido de respaldo. Usa la API conveniente para una sola imagen + fallback, o la API compuesta para control total.

import { Avatar } from "@/components/ui/avatar";

export default function Example() {
  return (
    <Avatar
      src="https://avatars.githubusercontent.com/u/000000?v=4"
      alt="User avatar"
      fallback="JD"
    />
  );
}

View Code

Instalación

bash

liminal add avatar

Uso

import { Avatar } from "@/components/ui/avatar";

export default function Example() {
  return (
    <Avatar
      src="https://avatars.githubusercontent.com/u/000000?v=4"
      alt="User avatar"
      fallback="JD"
    />
  );
}

View Code

Ejemplos

Con imagen

<Avatar
  src="https://avatars.githubusercontent.com/u/000000?v=4"
  alt="User"
  fallback="U"
/>

View Code

Solo fallback

Cuando no hay imagen o falla la carga, se muestra el texto o contenido de respaldo.

import { Avatar } from "@/components/ui/avatar";

export default function Example() {
  return <Avatar fallback="AB" />;
}

View Code

API compuesta

Para layout personalizado o varios elementos, usa AvatarRoot, AvatarImage y AvatarFallback.

import {
  AvatarRoot,
  AvatarImage,
  AvatarFallback,
} from "@/components/ui/avatar";

export default function Example() {
  return (
    <AvatarRoot className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
      <AvatarImage src="/avatar.png" alt="User avatar" />
      <AvatarFallback>JD</AvatarFallback>
    </AvatarRoot>
  );
}

View Code

API

Prop	Type	Default	Description
src	string	-	URL de la imagen del avatar.
alt	string	-	Descripción accesible de la imagen.
fallback	React.ReactNode	-	Contenido mostrado cuando no hay imagen o falla la carga.