AvatarGroupCount() — ui Function Reference

Architecture documentation for the AvatarGroupCount() function in avatar.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ AvatarGroupCount() — ui Function Reference

Dependency Diagram

graph TD
  acd82ba6_86b8_b940_2294_02f163d19a40["AvatarGroupCount()"]
  55d8e2d3_fb66_3ef4_a94f_bc4bfdea954b["avatar.tsx"]
  acd82ba6_86b8_b940_2294_02f163d19a40 -->|defined in| 55d8e2d3_fb66_3ef4_a94f_bc4bfdea954b
  style acd82ba6_86b8_b940_2294_02f163d19a40 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/ui-rtl/avatar.tsx lines 85–99

function AvatarGroupCount({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group-count"
      className={cn(
        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className
      )}
      {...props}
    />
  )
}