{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-stack",
  "title": "Avatar Stack",
  "description": "A compact, visually appealing component for displaying multiple user avatars in an overlapping stack. Perfect for showing participants in a group chat, team members, or active collaborators. Supports customizable size, max visible avatars, border styling, and optional '+n' indicator for overflow. Renders gracefully from 1 to dozens of users while maintaining a small footprint.",
  "files": [
    {
      "path": "components/shadcncraft/pro-marketing/avatar-stack.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface AvatarStackProps extends React.ComponentProps<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n  max?: number;\n  avatarSize?: number;\n  overlapRatio?: number;\n  mask?: boolean;\n}\n\nexport function AvatarStack({\n  children,\n  className,\n  orientation = \"horizontal\",\n  max, // Max visible avatars before \"+N\"\n  avatarSize, // Avatar size in pixels\n  overlapRatio = 0.2, // 20% of avatar size\n  mask = true,\n  style,\n  ...props\n}: AvatarStackProps) {\n  const items = React.Children.toArray(children);\n  const overflow = max ? Math.max(0, items.length - max) : 0;\n  const visible = items.slice(0, max);\n\n  // Use the first child as the chip wrapper so its size, shape, and styling\n  // (Avatar from any registry, plain div, etc.) automatically apply to \"+N\".\n  const firstChild = visible.find(React.isValidElement);\n\n  // `avatarSize` set: force children + chip to that pixel size; derive overlap from it.\n  // `avatarSize` omitted: children keep intrinsic size; overlap falls back to 0.5rem.\n  // Override the fallback overlap via `style={{ \"--overlap\": \"...\" }}` if needed.\n  const overlap = avatarSize != null ? `${overlapRatio * avatarSize}px` : \"0.5rem\";\n\n  return (\n    <div\n      data-slot=\"avatar-stack\"\n      data-orientation={orientation}\n      className={cn(\n        \"group isolate flex items-center\",\n        \"data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:-space-x-(--overlap)\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:-space-y-(--overlap)\",\n        \"*:shrink-0 *:object-cover *:object-center\",\n        avatarSize != null && \"*:size-(--avatar-size)!\",\n        mask && \"*:ring-2 *:ring-background\",\n        className\n      )}\n      style={\n        {\n          ...style,\n          \"--overlap\": overlap,\n          ...(avatarSize != null && { \"--avatar-size\": `${avatarSize}px` }),\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {visible}\n      {overflow > 0 &&\n        firstChild &&\n        React.cloneElement(\n          firstChild as React.ReactElement<Record<string, unknown>>,\n          { key: \"overflow\", \"data-slot\": \"avatar-stack-overflow\" },\n          <span className=\"flex size-full items-center justify-center rounded-[inherit] bg-muted text-xs font-medium text-muted-foreground\">\n            +{overflow}\n          </span>\n        )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/shadcncraft/pro-marketing/avatar-stack.tsx"
    }
  ],
  "meta": {
    "tier": "free",
    "figmaNodeId": "52380-8289",
    "bundle": "pro-marketing"
  },
  "type": "registry:ui"
}