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

{
  "name": "banner",
  "description": "Banner notification component",
  "files": [
    {
      "name": "banner.tsx",
      "content": "\"use client\"\n\nimport * 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 bannerVariants = cva(\n  \"relative w-full border-b px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        info: \"border-blue-500/50 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400\",\n        success:\n          \"border-green-500/50 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100 [&>svg]:text-green-600 dark:[&>svg]:text-green-400\",\n        warning:\n          \"border-yellow-500/50 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400\",\n        error:\n          \"border-red-500/50 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100 [&>svg]:text-red-600 dark:[&>svg]:text-red-400\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BannerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof bannerVariants> {\n  onClose?: () => void\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  ({ className, variant, onClose, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        className={cn(bannerVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n        {onClose && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"absolute right-4 top-3 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/5\"\n          >\n            <X className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Close</span>\n          </button>\n        )}\n      </div>\n    )\n  }\n)\nBanner.displayName = \"Banner\"\n\nexport { Banner, bannerVariants }\n"
    }
  ],
  "type": "components:ui"
}