{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "article-3",
  "title": "Documentation Page",
  "description": "Documentation article with breadcrumb navigation, a last-updated line, prose body containing a code block, and previous and next pagination cards.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/article/3/article-block.tsx",
      "content": "import { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst breadcrumb = [\"Docs\", \"Guides\", \"Authentication\"]\n\nexport default function ArticleBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-background px-6 py-16 text-foreground\">\n      <article className=\"w-full max-w-2xl\">\n        <nav aria-label=\"Breadcrumb\" className=\"mb-6\">\n          <ol className=\"flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground\">\n            {breadcrumb.map((crumb, i) => (\n              <li key={crumb} className=\"flex items-center gap-1.5\">\n                {i > 0 && (\n                  <IconPlaceholder\n                    lucide=\"ChevronRight\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRight\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"size-3.5 text-muted-foreground/50\"\n                    aria-hidden=\"true\"\n                  />\n                )}\n                <span\n                  className={\n                    i === breadcrumb.length - 1\n                      ? \"font-medium text-foreground\"\n                      : \"\"\n                  }\n                >\n                  {crumb}\n                </span>\n              </li>\n            ))}\n          </ol>\n        </nav>\n\n        <h1 className=\"font-heading text-3xl font-bold tracking-tight\">\n          Setting up authentication\n        </h1>\n        <p className=\"mt-3 text-muted-foreground\">\n          Connect a provider, protect your routes, and read the current session\n          on the server.\n        </p>\n        <p className=\"mt-4 text-xs text-muted-foreground tabular-nums\">\n          Last updated Jun 16, 2026\n        </p>\n\n        <Separator className=\"my-8\" />\n\n        <div className=\"flex flex-col gap-5 text-[15px]/relaxed text-foreground/80\">\n          <p>\n            Acme Auth wraps your app in a session provider and exposes helpers\n            for both client and server components. You can be up and running\n            with a single provider in under five minutes.\n          </p>\n\n          <h2 className=\"mt-4 font-heading text-xl font-semibold tracking-tight text-foreground\">\n            Install the provider\n          </h2>\n          <p>\n            Add the provider at the root of your application so every route can\n            read the session. It is safe to render on the server and streams no\n            secrets to the client.\n          </p>\n          <pre className=\"overflow-x-auto rounded-lg border border-border bg-muted/50 p-4 font-mono text-xs text-foreground\">\n            <code>{`import { AuthProvider } from \"@acme/auth\"\n\nexport default function RootLayout({ children }) {\n  return <AuthProvider>{children}</AuthProvider>\n}`}</code>\n          </pre>\n\n          <h2 className=\"mt-4 font-heading text-xl font-semibold tracking-tight text-foreground\">\n            Protect a route\n          </h2>\n          <p>\n            Call the session helper in any server component. If there is no\n            active session it redirects to your sign-in page automatically.\n          </p>\n        </div>\n\n        <Separator className=\"my-8\" />\n\n        <nav aria-label=\"Pagination\" className=\"grid gap-3 sm:grid-cols-2\">\n          <a\n            href=\"#\"\n            className=\"group flex flex-col gap-1 rounded-lg border border-border p-4 transition-colors hover:border-muted-foreground/40\"\n          >\n            <span className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <IconPlaceholder\n                lucide=\"ArrowLeft\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"ArrowLeft\"\n                remixicon=\"RiArrowLeftLine\"\n                className=\"size-3.5\"\n                aria-hidden=\"true\"\n              />\n              Previous\n            </span>\n            <span className=\"text-sm font-medium\">Installation</span>\n          </a>\n          <a\n            href=\"#\"\n            className=\"group flex flex-col items-end gap-1 rounded-lg border border-border p-4 text-right transition-colors hover:border-muted-foreground/40\"\n          >\n            <span className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              Next\n              <IconPlaceholder\n                lucide=\"ArrowRight\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"ArrowRight\"\n                remixicon=\"RiArrowRightLine\"\n                className=\"size-3.5\"\n                aria-hidden=\"true\"\n              />\n            </span>\n            <span className=\"text-sm font-medium\">Managing sessions</span>\n          </a>\n        </nav>\n      </article>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "932px",
    "tier": "free"
  },
  "categories": [
    "article"
  ],
  "type": "registry:block"
}