{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "not-found",
  "type": "registry:block",
  "title": "Not found",
  "description": "A 404 page with a way forward: home, an alternative, and the destinations people usually want.",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "https://abackui.com/r/badge.json",
    "https://abackui.com/r/button.json"
  ],
  "categories": [
    "Application"
  ],
  "docs": "https://abackui.com/docs/blocks/not-found",
  "meta": {
    "status": "beta",
    "usedIn": [
      "aback-tools",
      "aback-launch",
      "aback-group"
    ]
  },
  "files": [
    {
      "path": "components/blocks/not-found.tsx",
      "content": "import { useId, type ReactNode } from \"react\";\nimport { IconArrowRight, IconHome, IconSearch } from \"@tabler/icons-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface NotFoundLink {\n  title: string;\n  description: string;\n  href: string;\n}\n\nexport interface NotFoundBlockProps {\n  title?: ReactNode;\n  description?: ReactNode;\n  homeHref?: string;\n  /** A second real destination, such as the catalogue or the docs. */\n  secondaryAction?: { label: string; href: string };\n  /** Where most lost visitors were trying to go. */\n  links?: NotFoundLink[];\n  /** A hint that search exists, such as \"Press Ctrl K to search.\" Only if search is real. */\n  searchHint?: ReactNode;\n}\n\n/**\n * A 404 page that offers a way forward: home, one alternative, and the pages\n * people usually want. It renders the page's h1. Return a real 404 status from\n * your framework's not-found route; this block is only the content.\n */\nexport function NotFoundBlock({\n  title = \"Page not found\",\n  description = \"The page you followed does not exist. It may have moved or been renamed.\",\n  homeHref = \"/\",\n  secondaryAction,\n  links = [],\n  searchHint,\n}: NotFoundBlockProps) {\n  const headingId = useId();\n  return (\n    <section aria-labelledby={headingId} className=\"mx-auto w-full max-w-3xl px-4 py-16 md:px-6 lg:py-24\">\n      <div className=\"border border-border bg-card p-6 md:p-10\">\n        <Badge variant=\"brand\">Error 404</Badge>\n        <h1 id={headingId} className=\"mt-4 text-3xl font-bold tracking-tight text-foreground\">\n          {title}\n        </h1>\n        <p className=\"mt-2 max-w-xl text-sm leading-relaxed text-muted-foreground\">{description}</p>\n\n        <div className=\"mt-6 flex flex-wrap gap-2\">\n          <Button asChild>\n            <a href={homeHref}>\n              <IconHome aria-hidden=\"true\" />\n              Go home\n            </a>\n          </Button>\n          {secondaryAction ? (\n            <Button variant=\"outline\" asChild>\n              <a href={secondaryAction.href}>{secondaryAction.label}</a>\n            </Button>\n          ) : null}\n        </div>\n\n        {links.length ? (\n          <div className=\"mt-10 border-t border-border pt-6\">\n            <h2 className=\"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground\">\n              Popular destinations\n            </h2>\n            <ul className=\"mt-3 grid gap-3 sm:grid-cols-2\">\n              {links.map((link) => (\n                <li key={link.href}>\n                  <a\n                    href={link.href}\n                    className=\"group flex h-full items-start justify-between gap-3 border border-border p-3 outline-none transition-colors duration-200 hover:border-primary-300 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n                  >\n                    <span className=\"flex flex-col gap-0.5\">\n                      <span className=\"text-sm font-medium text-foreground group-hover:text-link\">{link.title}</span>\n                      <span className=\"text-xs text-muted-foreground\">{link.description}</span>\n                    </span>\n                    <IconArrowRight\n                      aria-hidden=\"true\"\n                      className=\"mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none\"\n                    />\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n\n        {searchHint ? (\n          <p className=\"mt-6 flex items-center gap-2 text-xs text-muted-foreground\">\n            <IconSearch aria-hidden=\"true\" className=\"size-3.5\" />\n            {searchHint}\n          </p>\n        ) : null}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/blocks/not-found.tsx"
    }
  ]
}