feat: add avatar-group-label component

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

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>
+    );
+}

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"
+    }
+  ]
+}