{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "article-5",
  "title": "Article With Author Sidebar",
  "description": "Article layout with a sticky sidebar holding an author bio card, related post links, and an inline newsletter signup form.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "input",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/article/5/article-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst related = [\n  { title: \"Designing for the first five minutes\", read: \"5 min\" },\n  { title: \"A practical guide to design tokens\", read: \"8 min\" },\n  { title: \"How we test accessible components\", read: \"6 min\" },\n]\n\nexport default function ArticleBlock() {\n  return (\n    <section className=\"w-full bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto grid w-full max-w-5xl grid-cols-1 gap-12 lg:grid-cols-[1fr_17rem]\">\n        <article className=\"flex flex-col gap-6\">\n          <div className=\"flex flex-col gap-3\">\n            <Badge variant=\"secondary\" className=\"w-fit\">\n              Product\n            </Badge>\n            <h1 className=\"font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n              Building a design system your whole team can trust\n            </h1>\n            <p className=\"text-sm text-muted-foreground\">\n              July 18, 2026 / 7 min read\n            </p>\n          </div>\n\n          <div className=\"flex flex-col gap-4 text-sm leading-relaxed text-muted-foreground\">\n            <p>\n              A design system is only as valuable as the trust people place in\n              it. When engineers reach for a component and it behaves exactly as\n              expected, the system disappears into the background and the work\n              speeds up.\n            </p>\n            <p>\n              The hard part is not the components themselves — it&apos;s the\n              contracts around them: naming, accessibility guarantees, and the\n              promise that upgrades won&apos;t break the surfaces already built.\n            </p>\n            <h2 className=\"pt-2 font-heading text-lg font-bold tracking-tight text-foreground\">\n              Start with the contract\n            </h2>\n            <p>\n              Before writing a single line of a component, we write down what it\n              promises: the props it accepts, the states it supports, and the\n              behavior it guarantees in both themes. That contract is what\n              teammates actually depend on.\n            </p>\n            <p>\n              Everything else — tokens, docs, tests — exists to keep that\n              contract honest as the system grows.\n            </p>\n          </div>\n        </article>\n\n        <aside className=\"flex flex-col gap-8 lg:sticky lg:top-8 lg:self-start\">\n          <div className=\"flex flex-col gap-4 rounded-lg border border-border p-5\">\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"size-11 border border-border\">\n                <AvatarImage\n                  src=\"https://i.pravatar.cc/80?img=32\"\n                  alt=\"Mia Cho\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>MC</AvatarFallback>\n              </Avatar>\n              <div className=\"flex flex-col\">\n                <span className=\"text-sm font-semibold\">Mia Cho</span>\n                <span className=\"text-xs text-muted-foreground\">\n                  Principal Designer\n                </span>\n              </div>\n            </div>\n            <p className=\"text-sm text-muted-foreground\">\n              Writes about design systems, accessibility, and the craft of\n              everyday product work.\n            </p>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              render={<a href=\"#\" />}\n              nativeButton={false}\n            >\n              Follow\n            </Button>\n          </div>\n\n          <div className=\"flex flex-col gap-3\">\n            <h3 className=\"font-heading text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n              Related\n            </h3>\n            <ul className=\"flex flex-col gap-4\">\n              {related.map((item) => (\n                <li key={item.title}>\n                  <a href=\"#\" className=\"group flex flex-col gap-1\">\n                    <span className=\"text-sm font-medium transition-colors group-hover:text-muted-foreground\">\n                      {item.title}\n                    </span>\n                    <span className=\"text-xs text-muted-foreground\">\n                      {item.read} read\n                    </span>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <Separator />\n\n          <div className=\"flex flex-col gap-3\">\n            <h3 className=\"font-heading text-sm font-semibold tracking-tight\">\n              Get the newsletter\n            </h3>\n            <p className=\"text-xs text-muted-foreground\">\n              Occasional notes on design and engineering. No spam.\n            </p>\n            <form className=\"flex flex-col gap-2\">\n              <Input\n                type=\"email\"\n                placeholder=\"you@example.com\"\n                aria-label=\"Email address\"\n              />\n              <Button type=\"submit\" size=\"sm\">\n                Subscribe\n                <IconPlaceholder\n                  lucide=\"ArrowRight\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRightIcon\"\n                  phosphor=\"ArrowRight\"\n                  remixicon=\"RiArrowRightLine\"\n                  data-icon=\"inline-end\"\n                  aria-hidden=\"true\"\n                />\n              </Button>\n            </form>\n          </div>\n        </aside>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "763px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "article"
  ],
  "type": "registry:block"
}