{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-with-dismiss",
  "type": "registry:component",
  "title": "Alert",
  "author": "Toby Belhome",
  "description": "Displays a callout for user attention.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "alert",
    "button"
  ],
  "files": [
    {
      "path": "examples/components/alert/with-dismiss/page.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { CheckCircle2Icon, XIcon } from \"lucide-react\";\n\nimport { Alert, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function AlertWithDismiss() {\n  const [show, setShow] = useState(true);\n\n  if (!show) return null;\n\n  return (\n    <Alert className=\"flex items-center justify-between\">\n      <div className=\"flex gap-3\">\n        <CheckCircle2Icon className=\"mt-0.5 size-4\" />\n        <AlertTitle>Success! Your changes have been saved</AlertTitle>\n      </div>\n      <Button variant=\"ghost\" size=\"icon-sm\" onClick={() => setShow(false)}>\n        <XIcon />\n      </Button>\n    </Alert>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/alert-with-dismiss.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}