Badge component

src/components/nurui/badge-demo.tsx

@@ -0,0 +1,18 @@
+// components/nurui/badge-demo.tsx
+import { Badge } from "@/components/nurui/badge";
+
+export function BadgeDemo({ className }: { className?: string }) {
+  return (
+    <div className={`flex flex-wrap items-center justify-center gap-3 p-8 ${className || ""}`}>
+      <Badge variant="default">Primary</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="danger">Danger</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="info">Info</Badge>
+      <Badge variant="light">Light</Badge>
+      <Badge variant="dark">Dark</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  );
+}

src/components/nurui/badge.tsx

@@ -0,0 +1,38 @@
+// components/nurui/badge.tsx
+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-full px-3 py-1 text-sm font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100",
+        secondary: "bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100",
+        success: "bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-100",
+        danger: "bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:text-red-100",
+        warning: "bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-900 dark:text-yellow-100",
+        info: "bg-cyan-100 text-cyan-800 hover:bg-cyan-200 dark:bg-cyan-900 dark:text-cyan-100",
+        light: "bg-gray-50 text-gray-700 hover:bg-gray-100 dark:bg-gray-700 dark:text-gray-200",
+        dark: "bg-gray-900 text-gray-100 hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900",
+        outline: "border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

src/components/pages/components/ComponentsPage.tsx

@@ -16,6 +16,7 @@ import { InfoCardDemo } from "@/components/nurui/info-card-demo";
 import WaveCard from "@/components/nurui/wave-card";
 import HackerBackground from "@/components/nurui/hacker-background";
 import AnimatedListDemo from "@/components/nurui/animated-list-demo";
+import { BadgeDemo } from "@/components/nurui/badge-demo";
 
 const ComponentsPage = () => {
   return (
@@ -241,4 +242,16 @@ const featuresComponents = [
     previewComponentName: "hacker-background",
     background: <HackerBackground />,
   },
+  {
+    name: "Badge",
+    description: "Displays a badge or a component that looks like a badge.",
+    href: "/docs/badge",
+    previewComponentName: "badge",
+    className: "col-span-full md:col-span-2 xl:col-span-1",
+    background: (
+      <div className="absolute -top-6 h-[400px] w-full scale-75 transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)]">
+        <BadgeDemo />
+      </div>
+    ),
+  },
 ];

src/content/docs/badge.mdx

@@ -0,0 +1,68 @@
+---
+title: "Badge"
+description: "Displays a badge or a component that looks like a badge."
+---
+
+<ComponentPreview componentName="badge" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+  <Cli />
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install dependencies</Step>
+
+<Cli isManual />
+
+<Step>Add util file</Step>
+
+`lib/utils.ts`
+
+<CodeBlock snippetKey="utils-ts" />
+
+<Step>Copy and paste the following code into your project.</Step>
+
+`components/nurui/badge.tsx`
+
+<CodeBlock componentName="badge" fileName="badge" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+### Props
+
+| Prop        | Type     | Default     | Description                                                    |
+| ----------- | -------- | ----------- | -------------------------------------------------------------- |
+| `variant`   | `string` | `"default"` | The visual variant of the badge. Options: `default`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `outline`. |
+| `className` | `string` | `""`        | Additional custom classes for positioning or styling the badge.|
+
+### Variants
+
+| Variant     | Description                    |
+| ----------- | ------------------------------ |
+| `default`   | Primary badge with blue color  |
+| `secondary` | Secondary badge with gray color|
+| `success`   | Success badge with green color |
+| `danger`    | Danger badge with red color    |
+| `warning`   | Warning badge with yellow color|
+| `info`      | Info badge with cyan color     |
+| `light`     | Light badge with light gray    |
+| `dark`      | Dark badge with dark gray      |
+| `outline`   | Outlined badge with border     |

src/registry/components-registry.tsx

@@ -50,6 +50,7 @@ export const Index: Record<string, ComponentEntry> = {
   progressBar: createEntry("progress-bar", ["progress-bar"]),
   banner: createEntry("banner", ["banner", "button"]),
   terminal: createEntry("terminal", ["terminal"]),
+  badge: createEntry("badge", ["badge"]),
   bannerCloseExample: createEntry("banner-close", [
     "banner-close",
     "banner",