shadcn/app/public/registry/styles/default/pill.json

{
  "name": "pill",
  "description": "Pill-shaped badge component",
  "files": [
    {
      "name": "pill.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst pillVariants = cva(\n  \"inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary/10 text-primary hover:bg-primary/20\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        success:\n          \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\",\n        warning:\n          \"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400\",\n        error: \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface PillProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof pillVariants> {\n  onRemove?: () => void\n}\n\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(\n  ({ className, variant, onRemove, children, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn(pillVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n        {onRemove && (\n          <button\n            type=\"button\"\n            onClick={onRemove}\n            className=\"ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10\"\n          >\n            <X className=\"h-3 w-3\" />\n            <span className=\"sr-only\">Remove</span>\n          </button>\n        )}\n      </span>\n    )\n  }\n)\nPill.displayName = \"Pill\"\n\nexport { Pill, pillVariants }\n"
    }
  ],
  "type": "components:ui"
}