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
  2f63781f_f6ce_b522_d8c9_e295e6aa581b["AvatarGroupCount()"]
  be692f8d_42ed_9898_a305_5ee346d784a3["avatar.tsx"]
  2f63781f_f6ce_b522_d8c9_e295e6aa581b -->|defined in| be692f8d_42ed_9898_a305_5ee346d784a3
  style 2f63781f_f6ce_b522_d8c9_e295e6aa581b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/ui/avatar.tsx lines 88–102

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}
    />
  )
}