diff --git a/package.json b/package.json
index 5774565..8a2c360 100644
--- a/package.json
+++ b/package.json
@@ -118,5 +118,6 @@
       "types": "./dist/src/helpers/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5"
 }
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
new file mode 100644
index 0000000..212004b
--- /dev/null
+++ b/src/components/Badge.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    :style="{ backgroundColor: bg, color: color }"
+    class="inline-flex items-center justify-center px-3 py-1 font-semibold hover:bg-opacity-80"
+    :class="[style === 'rounded' ? 'rounded-full' : 'rounded-md', 'transition']"
+  >
+    {{ value }}
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    bg: string
+    color: string
+    value: string
+    style: "rounded" | "pill"
+  }>(),
+  {
+    bg: "#000000",
+    color: "#ffffff",
+    value: "Badge",
+    style: "rounded",
+  },
+)
+</script>
+
+<style scoped>
+div {
+  @apply transition;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 46c6151..b67fbfd 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,3 +2,4 @@ export * from "./button"
 export * from "./smart"
 export * from "./modal"
 export * from "./toast"
+export { default as HoppBadge } from "./Badge.vue"
diff --git a/src/stories/Badge.story.vue b/src/stories/Badge.story.vue
new file mode 100644
index 0000000..7713854
--- /dev/null
+++ b/src/stories/Badge.story.vue
@@ -0,0 +1,11 @@
+<template>
+  <Story title="Badge">
+    <Variant title="Single">
+      <HoppBadge />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppBadge } from "../components"
+</script>