From 62cb6aeffe75d553af917fef19bde4d93df6191e Mon Sep 17 00:00:00 2001 From: Faisal Date: Mon, 29 Jun 2026 01:15:44 +0600 Subject: [PATCH 1/2] - Added badge component --- src/components/nurui/badge-demo.tsx | 17 ++++++ src/components/nurui/badge.tsx | 38 +++++++++++++ .../pages/components/ComponentsPage.tsx | 13 +++++ src/content/docs/badge.mdx | 54 +++++++++++++++++++ src/registry/components-registry.tsx | 1 + 5 files changed, 123 insertions(+) create mode 100644 src/components/nurui/badge-demo.tsx create mode 100644 src/components/nurui/badge.tsx create mode 100644 src/content/docs/badge.mdx diff --git a/src/components/nurui/badge-demo.tsx b/src/components/nurui/badge-demo.tsx new file mode 100644 index 0000000..e917917 --- /dev/null +++ b/src/components/nurui/badge-demo.tsx @@ -0,0 +1,17 @@ +// components/nurui/badge-demo.tsx +import { Badge } from "@/components/nurui/badge"; + +export function BadgeDemo({ className }: { className?: string }) { + return ( +
+ Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+ ); +} \ No newline at end of file diff --git a/src/components/nurui/badge.tsx b/src/components/nurui/badge.tsx new file mode 100644 index 0000000..c63dc40 --- /dev/null +++ b/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 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + 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, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ); +} + +export { Badge, badgeVariants }; \ No newline at end of file diff --git a/src/components/pages/components/ComponentsPage.tsx b/src/components/pages/components/ComponentsPage.tsx index 1a1371c..a8443a8 100644 --- a/src/components/pages/components/ComponentsPage.tsx +++ b/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: , }, + { + 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: ( +
+ +
+ ), + }, ]; diff --git a/src/content/docs/badge.mdx b/src/content/docs/badge.mdx new file mode 100644 index 0000000..684f0c5 --- /dev/null +++ b/src/content/docs/badge.mdx @@ -0,0 +1,54 @@ +--- +title: "Badge" +description: "Displays a badge or a component that looks like a badge." +--- + + + +## Installation + + + + + CLI + Manual + + + + + + + + + + +Install dependencies + + + +Add util file + +`lib/utils.ts` + + + +Copy and paste the following code into your project. + +`components/nurui/badge.tsx` + + + +Update the import paths to match your project setup. + + + + + + + +### Props + +| Prop | Type | Default | Description | +| ----------- | -------- | ----------- | -------------------------------------------------------------- | +| `variant` | `string` | `"default"` | The visual variant of the badge (default, secondary, destructive, outline). | +| `className` | `string` | `""` | Additional custom classes for positioning or styling the badge.| \ No newline at end of file diff --git a/src/registry/components-registry.tsx b/src/registry/components-registry.tsx index 63c9fea..3cb3800 100644 --- a/src/registry/components-registry.tsx +++ b/src/registry/components-registry.tsx @@ -50,6 +50,7 @@ export const Index: Record = { 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", From 3d9c145edc1774e99b3941b3ac65b80b129800d9 Mon Sep 17 00:00:00 2001 From: Faisal Date: Mon, 29 Jun 2026 01:30:04 +0600 Subject: [PATCH 2/2] - Update files --- src/components/nurui/badge-demo.tsx | 1 + src/components/nurui/badge.tsx | 2 +- src/content/docs/badge.mdx | 18 ++++++++++++++++-- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/nurui/badge-demo.tsx b/src/components/nurui/badge-demo.tsx index e917917..5c18222 100644 --- a/src/components/nurui/badge-demo.tsx +++ b/src/components/nurui/badge-demo.tsx @@ -12,6 +12,7 @@ export function BadgeDemo({ className }: { className?: string }) { Info Light Dark + Outline
); } \ No newline at end of file diff --git a/src/components/nurui/badge.tsx b/src/components/nurui/badge.tsx index c63dc40..5e00035 100644 --- a/src/components/nurui/badge.tsx +++ b/src/components/nurui/badge.tsx @@ -4,7 +4,7 @@ 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 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + "inline-flex items-center rounded-full px-3 py-1 text-sm font-medium transition-colors", { variants: { variant: { diff --git a/src/content/docs/badge.mdx b/src/content/docs/badge.mdx index 684f0c5..6218fc1 100644 --- a/src/content/docs/badge.mdx +++ b/src/content/docs/badge.mdx @@ -50,5 +50,19 @@ description: "Displays a badge or a component that looks like a badge." | Prop | Type | Default | Description | | ----------- | -------- | ----------- | -------------------------------------------------------------- | -| `variant` | `string` | `"default"` | The visual variant of the badge (default, secondary, destructive, outline). | -| `className` | `string` | `""` | Additional custom classes for positioning or styling the badge.| \ No newline at end of file +| `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 | \ No newline at end of file