Added Badge Component

components/badge/react/badge-section/Badge.jsx

@@ -0,0 +1,75 @@
+"use client"
+
+import React from "react"
+
+// Color definitions for different schemes
+const colorSchemes = {
+  default: { background: "#e4e6eb", color: "#050505" },
+  danger: { background: "#fce8e6", color: "#c5221f" },
+  success: { background: "#e6f4ea", color: "#1e8e3e" },
+  warning: { background: "#fff0e1", color: "#d96f00" },
+  info: { background: "#e8f0fe", color: "#1a73e8" },
+  purple: { background: "#f3e8fd", color: "#632ca6" },
+}
+
+// --- Reusable Badge Component ---
+const Badge = ({ children, colorScheme = "default" }) => {
+  const badgeStyle = {
+    ...styles.base,
+    ...colorSchemes[colorScheme],
+  }
+  return <span style={badgeStyle}>{children}</span>
+}
+
+// --- Main Preview Component to Render ---
+export default function BadgePreview() {
+  return (
+    <div style={styles.previewContainer}>
+      <div style={styles.section}>
+        <h3 style={styles.heading}>Badges</h3>
+        <div style={styles.componentRow}>
+          <Badge colorScheme="danger">New</Badge>
+          <Badge colorScheme="success">Complete</Badge>
+          <Badge colorScheme="info">99+</Badge>
+          <Badge colorScheme="default">Archived</Badge>
+          <Badge colorScheme="purple">Admin</Badge>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// All styles are defined in this object
+const styles = {
+  previewContainer: {
+    fontFamily: "sans-serif",
+    padding: "2rem",
+    backgroundColor: "#f8f9fa",
+    borderRadius: "8px",
+    width: "100%",
+    boxSizing: "border-box",
+  },
+  section: {
+    marginBottom: "1rem",
+  },
+  heading: {
+    color: "#343a40",
+    borderBottom: "1px solid #dee2e6",
+    paddingBottom: "0.5rem",
+    marginBottom: "1rem",
+  },
+  componentRow: {
+    display: "flex",
+    gap: "10px",
+    alignItems: "center",
+  },
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "0.25em 0.6em",
+    fontSize: "12px",
+    fontWeight: "600",
+    borderRadius: "16px",
+    lineHeight: "1.5",
+  },
+}

components/badge/react/badge-section/component.json

@@ -0,0 +1,23 @@
+{
+  "name": "badge",
+  "category": "badge",
+  "framework": "react",
+  "tags": ["badge", "status", "indicator", "label"],
+  "author": "Saikiran-Sugurthi",
+  "license": "MIT",
+  "version": "1.0.0",
+  "preview": "A simple, non-interactive component for displaying status or labels.",
+  "props": [
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "description": "The content displayed inside the badge."
+    },
+    {
+      "name": "colorScheme",
+      "type": "string",
+      "description": "The color scheme of the badge. Options: default, danger, success, warning, info, purple.",
+      "default": "default"
+    }
+  ]
+}

components/badge/react/badge-section/readme.md

@@ -0,0 +1,39 @@
+# Badge
+
+A simple, non-interactive component for displaying status indicators, labels, or counts.
+
+**Author:** [@Saikiran-Sugurthi](https://github.com/Saikiran-Sugurthi)
+
+---
+## Features
+
+-   Displays short, non-interactive status labels.
+-   Includes multiple built-in color schemes (success, danger, info, etc.).
+-   Self-contained styling using CSS-in-JS, requiring no external stylesheets.
+-   Lightweight and has no dependencies other than React.
+
+---
+## Props
+
+| Prop          | Type      | Default   | Description                                                        |
+| :------------ | :-------- | :-------- | :----------------------------------------------------------------- |
+| `children`    | ReactNode | `null`    | The content to be displayed inside the badge.                      |
+| `colorScheme` | string    | "default" | The color scheme to use. Options: `default`, `danger`, `success`, `warning`, `info`, `purple`. |
+
+---
+## Usage
+
+```jsx
+// Note: This assumes the Badge component logic has been extracted into its own file.
+import Badge from "./Badge"
+
+function App() {
+  return (
+    <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
+      <Badge colorScheme="success">Complete</Badge>
+      <Badge colorScheme="danger">New</Badge>
+      <Badge colorScheme="info">In Progress</Badge>
+      <Badge colorScheme="default">Archived</Badge>
+    </div>
+  )
+}

packages/ui-metadata/schema.json

@@ -18,7 +18,8 @@
         "progress",
         "slider",
         "overlay",
-        "dashboard"
+        "dashboard",
+        "badge"
       ]
     },
     "framework": {