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

Relationship Graph

Source Code

apps/v4/examples/base/ui/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}
    />
  )
}