AvatarSizeExample() — ui Function Reference

Architecture documentation for the AvatarSizeExample() function in avatar-size.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ AvatarSizeExample() — ui Function Reference

Dependency Diagram

graph TD
  d035fc32_df25_a3be_5f28_4d7d9f539d85["AvatarSizeExample()"]
  1d0a63dc_1c77_7826_1d75_69d3a06d4652["avatar-size.tsx"]
  d035fc32_df25_a3be_5f28_4d7d9f539d85 -->|defined in| 1d0a63dc_1c77_7826_1d75_69d3a06d4652
  style d035fc32_df25_a3be_5f28_4d7d9f539d85 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/avatar-size.tsx lines 3–20

export function AvatarSizeExample() {
  return (
    <div className="flex flex-wrap items-center gap-2 grayscale">
      <Avatar size="sm">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar size="lg">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </div>
  )
}