From 3a8ee67bfcb36dce1d2273e01c454ce17e5958d5 Mon Sep 17 00:00:00 2001
From: aaravjain151 <aaravjain151@gmail.com>
Date: Fri, 16 May 2025 18:12:35 -0700
Subject: [PATCH] New badge component

---
 components/ui/badge.tsx         |  45 ++++
 package-lock.json               | 457 --------------------------------
 stories/Badge/Documentation.mdx | 109 ++++++++
 stories/Badge/badge.stories.tsx |  45 ++++
 4 files changed, 199 insertions(+), 457 deletions(-)
 create mode 100644 components/ui/badge.tsx
 create mode 100644 stories/Badge/Documentation.mdx
 create mode 100644 stories/Badge/badge.stories.tsx

diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..c8c9a5b
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            type: {default: "bg-gradient-to-r from-orange-400 to-red-500 text-white font-bold rounded-full px-4 py-1 text-sm shadow-sm",
+
+                //"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+              secondary:
+                "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+              destructive:
+                "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+              //outline: "text-foreground",
+              solid: "bg-primary text-white border-transparent shadow-xs hover:bg-primary/90",
+                subtle: "bg-primary/20 text-primary border-transparent",
+               outline:
+                    "border border-primary text-primary bg-transparent",
+                ghost: "border border-gray-300 text-gray-500 bg-transparent",
+            },
+        },
+        defaultVariants: {
+            type: "solid",
+        },
+    }
+);
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {
+    className?: string;
+}
+
+function Badge({ className, type, ...props }: BadgeProps) {
+    return (
+        <div
+            className={cn(badgeVariants({ type }), className)}
+            {...props}
+        />
+    );
+}
+
+export { Badge, badgeVariants };
diff --git a/package-lock.json b/package-lock.json
index 985b44e..61dede1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3652,39 +3652,6 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-id": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
-            "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-use-layout-effect": "1.1.1"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/@radix-ui/react-popper": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.4.tgz",
@@ -3843,204 +3810,6 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-roving-focus": {
-            "version": "1.1.7",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.7.tgz",
-            "integrity": "sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/primitive": "1.1.2",
-                "@radix-ui/react-collection": "1.1.4",
-                "@radix-ui/react-compose-refs": "1.1.2",
-                "@radix-ui/react-context": "1.1.2",
-                "@radix-ui/react-direction": "1.1.1",
-                "@radix-ui/react-id": "1.1.1",
-                "@radix-ui/react-primitive": "2.1.0",
-                "@radix-ui/react-use-callback-ref": "1.1.1",
-                "@radix-ui/react-use-controllable-state": "1.2.2"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/primitive": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
-            "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
-            "license": "MIT"
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.4.tgz",
-            "integrity": "sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-compose-refs": "1.1.2",
-                "@radix-ui/react-context": "1.1.2",
-                "@radix-ui/react-primitive": "2.1.0",
-                "@radix-ui/react-slot": "1.2.0"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
-            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-direction": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
-            "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.0.tgz",
-            "integrity": "sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-slot": "1.2.0"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
-            "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-compose-refs": "1.1.2"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-callback-ref": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
-            "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-controllable-state": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
-            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-use-effect-event": "0.0.2",
-                "@radix-ui/react-use-layout-effect": "1.1.1"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-layout-effect": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/@radix-ui/react-slider": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.2.tgz",
@@ -4122,156 +3891,6 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/primitive": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
-            "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
-            "license": "MIT"
-        },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-compose-refs": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-context": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
-            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-direction": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
-            "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.3.tgz",
-            "integrity": "sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-compose-refs": "1.1.2",
-                "@radix-ui/react-use-layout-effect": "1.1.1"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.0.tgz",
-            "integrity": "sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-slot": "1.2.0"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
-            "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-compose-refs": "1.1.2"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
-            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-use-effect-event": "0.0.2",
-                "@radix-ui/react-use-layout-effect": "1.1.1"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-layout-effect": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/@radix-ui/react-toast": {
             "version": "1.2.10",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.10.tgz",
@@ -4358,39 +3977,6 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-use-effect-event": {
-            "version": "0.0.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
-            "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-use-layout-effect": "1.1.1"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/@radix-ui/react-use-escape-keydown": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
@@ -5464,8 +5050,6 @@
                 "@tailwindcss/oxide": "4.1.4",
                 "postcss": "^8.4.41",
                 "tailwindcss": "4.1.4"
-<<<<<<< HEAD
-=======
             }
         },
         "node_modules/@tanstack/react-table": {
@@ -5499,49 +5083,8 @@
             "funding": {
                 "type": "github",
                 "url": "https://github.com/sponsors/tannerlinsley"
->>>>>>> upstream/main
             }
         },
-        "node_modules/@tanstack/react-table": {
-            "version": "8.21.3",
-            "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
-            "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
-            "license": "MIT",
-            "dependencies": {
-                "@tanstack/table-core": "8.21.3"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/tannerlinsley"
-            },
-            "peerDependencies": {
-                "react": ">=16.8",
-                "react-dom": ">=16.8"
-            }
-        },
-        "node_modules/@tanstack/table-core": {
-            "version": "8.21.3",
-            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
-            "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/tannerlinsley"
-            }
-        },
-        "node_modules/@tailwindcss/postcss/node_modules/tailwindcss": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.3.tgz",
-            "integrity": "sha512-ImmZF0Lon5RrQpsEAKGxRvHwCvMgSC4XVlFRqmbzTEDb/3wvin9zfEZrMwgsa3yqBbPqahYcVI6lulM2S7IZAA==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/@testing-library/dom": {
             "version": "10.4.0",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
diff --git a/stories/Badge/Documentation.mdx b/stories/Badge/Documentation.mdx
new file mode 100644
index 0000000..3e09a7b
--- /dev/null
+++ b/stories/Badge/Documentation.mdx
@@ -0,0 +1,109 @@
+import { Meta, Primary, Controls, Story } from "@storybook/blocks";
+import * as BadgeStories from "./Badge.stories";
+import { Badge } from "@/components/ui/badge";
+
+<Meta of={BadgeStories} />
+
+# Badge
+
+Displays a badge or a component that looks like a badge.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Link](#link)
+- [Variants](#variants) 
+- [Examples](#examples)
+    - [Default](#default)
+    - [Secondary](#secondary)
+    - [Outline](#outline)
+    - [Destructive](#destructive)
+- [Best Practices](#best-practices)
+
+---
+
+## Installation
+
+To integrate the Badge component into your project, import it from the components directory:
+
+```tsx
+import { Badge } from "@/components/ui/badge";
+```
+
+---
+
+## Usage
+
+Using the Badge component is straightforward. Here’s a basic example:
+
+```tsx
+import { Badge } from "@/components/ui/badge";
+
+<Badge>Badge</Badge>
+```
+
+<Primary />
+
+---
+
+## Link
+
+You can use the `badgeVariants` helper to create a link that looks like a badge.
+
+```tsx
+import { badgeVariants } from "@/components/ui/badge";
+import Link from "next/link";
+
+<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>
+```
+
+---
+
+## Variants
+
+The Badge component supports multiple variants.
+
+- **Default**: Standard badge.
+- **Secondary**: A secondary-styled badge.
+- **Outline**: A badge with outlined styling.
+- **Destructive**: A badge for destructive actions.
+
+---
+
+## Examples
+
+### Default
+
+The default variant of the badge.
+
+<Story of={BadgeStories.Default} />
+
+### Secondary
+
+The secondary variant of the badge.
+
+<Story of={BadgeStories.Secondary} />
+
+### Outline
+
+The outline variant of the badge.
+
+<Story of={BadgeStories.Outline} />
+
+### Destructive
+
+The destructive variant of the badge.
+
+<Story of={BadgeStories.Destructive} />
+
+---
+
+## Best Practices
+
+To ensure a consistent and accessible user experience, consider the following best practices when using the Badge component:
+
+1. **Use concise text**: Keep the text inside the badge short and meaningful.
+2. **Choose appropriate variants**: Use the correct variant to match the UI context.
+3. **Avoid overuse**: Badges should highlight important information, not overwhelm the interface.
+4. **Ensure readability**: Maintain contrast between text and background for accessibility.
diff --git a/stories/Badge/badge.stories.tsx b/stories/Badge/badge.stories.tsx
new file mode 100644
index 0000000..c8c9a5b
--- /dev/null
+++ b/stories/Badge/badge.stories.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            type: {default: "bg-gradient-to-r from-orange-400 to-red-500 text-white font-bold rounded-full px-4 py-1 text-sm shadow-sm",
+
+                //"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+              secondary:
+                "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+              destructive:
+                "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+              //outline: "text-foreground",
+              solid: "bg-primary text-white border-transparent shadow-xs hover:bg-primary/90",
+                subtle: "bg-primary/20 text-primary border-transparent",
+               outline:
+                    "border border-primary text-primary bg-transparent",
+                ghost: "border border-gray-300 text-gray-500 bg-transparent",
+            },
+        },
+        defaultVariants: {
+            type: "solid",
+        },
+    }
+);
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {
+    className?: string;
+}
+
+function Badge({ className, type, ...props }: BadgeProps) {
+    return (
+        <div
+            className={cn(badgeVariants({ type }), className)}
+            {...props}
+        />
+    );
+}
+
+export { Badge, badgeVariants };