AvatarDemo() — ui Function Reference

Architecture documentation for the AvatarDemo() function in avatar-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ AvatarDemo() — ui Function Reference

Dependency Diagram

graph TD
  65775c89_0926_e88b_d8e5_855c1d433f02["AvatarDemo()"]
  b1e6dddb_5bd1_41f6_311a_c645c3950d89["avatar-demo.tsx"]
  65775c89_0926_e88b_d8e5_855c1d433f02 -->|defined in| b1e6dddb_5bd1_41f6_311a_c645c3950d89
  style 65775c89_0926_e88b_d8e5_855c1d433f02 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/avatar-demo.tsx lines 10–52

export default function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-6 md:gap-12">
      <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>+3</AvatarGroupCount>
      </AvatarGroup>
    </div>
  )
}