{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "banner-02",
  "title": "Variants",
  "description": "Info, success, warning, and error tones stacked.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/patterns/banner/banner-02.tsx",
      "content": "import { AlertTriangle, CheckCircle2, Info, XCircle } from 'lucide-react'\n\nexport function Banner02() {\n  return (\n    <div className=\"flex w-full flex-col gap-2.5\">\n      <div className=\"flex items-start gap-3 rounded-lg border border-blue-500/20 bg-blue-500/10 px-4 py-3 text-sm text-blue-700 dark:text-blue-300\">\n        <Info className=\"mt-0.5 size-5 shrink-0 text-blue-600 dark:text-blue-400\" />\n        <div className=\"flex flex-col gap-0.5\">\n          <p className=\"font-medium\">New feature</p>\n          <p className=\"opacity-80\">Saved views are now available on every board.</p>\n        </div>\n      </div>\n\n      <div className=\"flex items-start gap-3 rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-700 dark:text-emerald-300\">\n        <CheckCircle2 className=\"mt-0.5 size-5 shrink-0 text-emerald-600 dark:text-emerald-400\" />\n        <div className=\"flex flex-col gap-0.5\">\n          <p className=\"font-medium\">Payment received</p>\n          <p className=\"opacity-80\">\n            Your invoice has been paid and a receipt is on its way.\n          </p>\n        </div>\n      </div>\n\n      <div className=\"flex items-start gap-3 rounded-lg border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-300\">\n        <AlertTriangle className=\"mt-0.5 size-5 shrink-0 text-amber-600 dark:text-amber-400\" />\n        <div className=\"flex flex-col gap-0.5\">\n          <p className=\"font-medium\">Storage almost full</p>\n          <p className=\"opacity-80\">\n            You have used 92% of your plan. Upgrade to avoid interruptions.\n          </p>\n        </div>\n      </div>\n\n      <div className=\"flex items-start gap-3 rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-300\">\n        <XCircle className=\"mt-0.5 size-5 shrink-0 text-red-600 dark:text-red-400\" />\n        <div className=\"flex flex-col gap-0.5\">\n          <p className=\"font-medium\">Sync failed</p>\n          <p className=\"opacity-80\">\n            We could not reach the server. Your changes are saved locally.\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/banner/banner-02.tsx"
    }
  ],
  "type": "registry:block"
}