AvatarRtl() — ui Function Reference

Architecture documentation for the AvatarRtl() function in avatar-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ AvatarRtl() — ui Function Reference

Dependency Diagram

graph TD
  bd4ee23f_9d0f_153e_5757_227c3e9089d8["AvatarRtl()"]
  ee6c8729_12d3_0a64_8c40_fd809b90ff21["avatar-rtl.tsx"]
  bd4ee23f_9d0f_153e_5757_227c3e9089d8 -->|defined in| ee6c8729_12d3_0a64_8c40_fd809b90ff21
  style bd4ee23f_9d0f_153e_5757_227c3e9089d8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/avatar-rtl.tsx lines 39–86

export function AvatarRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <div
      className="flex flex-row flex-wrap items-center gap-6 md:gap-12"
      dir={dir}
    >
      <Avatar>
        <AvatarImage
          src="https://github.com/shadcn.png"
          alt="@shadcn"
          className="grayscale"
        />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
        <AvatarBadge className="bg-green-600 dark:bg-green-800" />
      </Avatar>
      <AvatarGroup className="grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/maxleiter.png"
            alt="@maxleiter"
          />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>{t.moreUsers}</AvatarGroupCount>
      </AvatarGroup>
    </div>
  )
}