{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/badge/Badge.tsx",
      "content": "import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '@/lib/utils'\nimport { badgeVariants, type BadgeVariants } from './badge.variants'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, BadgeVariants {\n  /** Render the child element as the badge (e.g. an <a>) instead of a <span>. */\n  asChild?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'span'\n    return (\n      <Comp\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"badge\"\n        className={cn(badgeVariants({ variant }), className)}\n        {...props}\n      />\n    )\n  },\n)\nBadge.displayName = 'Badge'\n\nexport { Badge }\n",
      "type": "registry:ui",
      "target": "~/components/ui/badge/Badge.tsx"
    },
    {
      "path": "packages/registry-react/components/badge/badge.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const badgeVariants = cva(\n  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors duration-200 overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n        success:\n          'border-transparent bg-[var(--success)]/10 text-[var(--success)] dark:text-[var(--success)] [a&]:hover:bg-[var(--success)]/20',\n        warning:\n          'border-transparent bg-[var(--warning)]/10 text-[var(--warning)] dark:text-[var(--warning)] [a&]:hover:bg-[var(--warning)]/20',\n        info: 'border-transparent bg-[var(--info)]/10 text-[var(--info)] dark:text-[var(--info)] [a&]:hover:bg-[var(--info)]/20',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/badge/badge.variants.ts"
    },
    {
      "path": "packages/registry-react/components/badge/index.ts",
      "content": "export { Badge, type BadgeProps } from './Badge'\nexport { badgeVariants, type BadgeVariants } from './badge.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/badge/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-slot"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Small inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.",
  "categories": [
    "data-display"
  ]
}