From 9a582270da0d53d882dc102adf6b17489f478ab9 Mon Sep 17 00:00:00 2001
From: shridmishra <shridmishra00@gmail.com>
Date: Sat, 18 Oct 2025 17:30:44 +0530
Subject: [PATCH] feat: add avatar-group-label component

---
 .../badge/react/avatar-group-label/README.md  | 34 +++++++++++++++++++
 .../avatar-group-label/avatar-group-label.jsx | 24 +++++++++++++
 .../react/avatar-group-label/component.json   | 23 +++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 components/badge/react/avatar-group-label/README.md
 create mode 100644 components/badge/react/avatar-group-label/avatar-group-label.jsx
 create mode 100644 components/badge/react/avatar-group-label/component.json

diff --git a/components/badge/react/avatar-group-label/README.md b/components/badge/react/avatar-group-label/README.md
new file mode 100644
index 0000000..ecd6d33
--- /dev/null
+++ b/components/badge/react/avatar-group-label/README.md
@@ -0,0 +1,34 @@
+# Avatar Group Label
+
+A compact avatar group with overlapping profile pictures and a trust label — great for showing credibility or user engagement.
+
+**Author:** [@shridmishra](https://github.com/shridmishra)
+
+---
+
+## Features
+
+- Displays multiple circular avatars in an overlapping row.
+- Includes a customizable trust label.
+- Fully styled with Tailwind CSS.
+- Lightweight and framework-agnostic.
+
+---
+
+## Props
+
+| Prop       | Type      | Default                   | Description                                      |
+| :---------- | :-------- | :------------------------ | :----------------------------------------------- |
+| `avatars`   | string[]  | `[]`                      | Array of image URLs for avatars.                 |
+| `label`     | string    | `"Trusted by 10,000+ people"` | Text displayed next to the avatar group.         |
+
+---
+
+## Usage
+
+```jsx
+import AvatarGroupLabel from "./AvatarGroupLabel"
+
+export default function App() {
+  return <AvatarGroupLabel />
+}
diff --git a/components/badge/react/avatar-group-label/avatar-group-label.jsx b/components/badge/react/avatar-group-label/avatar-group-label.jsx
new file mode 100644
index 0000000..6d3d154
--- /dev/null
+++ b/components/badge/react/avatar-group-label/avatar-group-label.jsx
@@ -0,0 +1,24 @@
+export default function AvatarGroupLabel() {
+    return (
+        <div className="flex flex-wrap items-center justify-center p-1 rounded-full bg-gray-900 border border-gray-700 text-sm w-[300px] mx-auto">
+            <div className="flex items-center">
+                <img
+                    className="w-[30px] rounded-full border-2 border-gray-900"
+                    src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=50"
+                    alt="userImage1"
+                />
+                <img
+                    className="w-[30px] rounded-full border-2 border-gray-900 -translate-x-2"
+                    src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=50"
+                    alt="userImage2"
+                />
+                <img
+                    className="w-[30px] rounded-full border-2 border-gray-900 -translate-x-4"
+                    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=50&h=50&auto=format&fit=crop"
+                    alt="userImage3"
+                />
+            </div>
+            <p className="-translate-x-2 text-gray-300">Trusted by 10,000+ people</p>
+        </div>
+    );
+}
diff --git a/components/badge/react/avatar-group-label/component.json b/components/badge/react/avatar-group-label/component.json
new file mode 100644
index 0000000..82fec24
--- /dev/null
+++ b/components/badge/react/avatar-group-label/component.json
@@ -0,0 +1,23 @@
+{
+  "name": "avatar-group-label",
+  "category": "badge",
+  "framework": "react",
+  "tags": ["avatar", "profile", "group", "trust", "label"],
+  "author": "shridmishra",
+  "license": "MIT",
+  "version": "1.0.0",
+  "preview": "An avatar group with overlapping profile pictures and a trust label.",
+  "props": [
+    {
+      "name": "avatars",
+      "type": "string[]",
+      "description": "Array of image URLs to display as avatars."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "Text displayed next to the avatar group.",
+      "default": "Trusted by 10,000+ people"
+    }
+  ]
+}