{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-3",
  "title": "Organization Profile Card",
  "description": "Company profile card with a logo mark, verified badge, stat strip, member avatar stack, and website and contact links.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/profile/3/profile-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst stats = [\n  { label: \"Clients\", value: \"4k\" },\n  { label: \"Projects\", value: \"126\" },\n  { label: \"Founded\", value: \"2019\" },\n]\n\nconst team = [\n  { name: \"Ada\", src: \"https://i.pravatar.cc/64?img=47\" },\n  { name: \"Leo\", src: \"https://i.pravatar.cc/64?img=12\" },\n  { name: \"Mara\", src: \"https://i.pravatar.cc/64?img=32\" },\n  { name: \"Owen\", src: \"https://i.pravatar.cc/64?img=53\" },\n]\n\nexport default function ProfileBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-lg rounded-xl border border-border bg-background p-6\">\n        <div className=\"flex items-start gap-4\">\n          <span\n            className=\"flex size-14 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground\"\n            aria-hidden=\"true\"\n          >\n            <IconPlaceholder\n              lucide=\"Sparkles\"\n              tabler=\"IconSparkles\"\n              hugeicons=\"SparklesIcon\"\n              phosphor=\"Sparkle\"\n              remixicon=\"RiSparkling2Fill\"\n              className=\"size-7\"\n            />\n          </span>\n          <div className=\"flex flex-1 flex-col gap-1\">\n            <div className=\"flex items-center gap-2\">\n              <h1 className=\"font-heading text-lg font-semibold tracking-tight\">\n                Acme Labs\n              </h1>\n              <Badge variant=\"secondary\" className=\"gap-1\">\n                <IconPlaceholder\n                  lucide=\"Check\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"Check\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3\"\n                  aria-hidden=\"true\"\n                />\n                Verified\n              </Badge>\n            </div>\n            <p className=\"text-sm text-muted-foreground\">\n              Design tools for product teams\n            </p>\n          </div>\n        </div>\n\n        <p className=\"mt-4 text-sm/relaxed text-foreground/80\">\n          We build calm, reliable software for the teams that ship the products\n          you use every day. Trusted by more than 4,000 companies worldwide.\n        </p>\n\n        <div className=\"mt-5 grid grid-cols-3 divide-x divide-border border-y border-border\">\n          {stats.map((stat) => (\n            <div\n              key={stat.label}\n              className=\"flex flex-col items-center gap-0.5 py-3\"\n            >\n              <span className=\"text-sm font-semibold tabular-nums\">\n                {stat.value}\n              </span>\n              <span className=\"text-xs text-muted-foreground\">\n                {stat.label}\n              </span>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-5 flex items-center justify-between gap-4\">\n          <div className=\"flex items-center gap-2.5\">\n            <div className=\"flex -space-x-2\">\n              {team.map((member) => (\n                <Avatar\n                  key={member.name}\n                  className=\"size-7 border-2 border-background\"\n                >\n                  <AvatarImage\n                    src={member.src}\n                    alt={member.name}\n                    className=\"grayscale\"\n                  />\n                  <AvatarFallback className=\"text-[10px]\">\n                    {member.name[0]}\n                  </AvatarFallback>\n                </Avatar>\n              ))}\n            </div>\n            <span className=\"text-sm text-muted-foreground\">44 Members</span>\n          </div>\n          <a\n            href=\"#\"\n            className=\"text-sm font-medium text-foreground transition-colors hover:text-foreground/80\"\n          >\n            View all\n          </a>\n        </div>\n\n        <Separator className=\"my-5\" />\n\n        <div className=\"flex items-center gap-2\">\n          <Button\n            className=\"flex-1\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n          >\n            Visit Website\n            <IconPlaceholder\n              lucide=\"ArrowUpRight\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRight\"\n              remixicon=\"RiArrowRightUpLine\"\n              data-icon=\"inline-end\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n          <Button\n            variant=\"outline\"\n            className=\"flex-1\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n          >\n            Contact\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/profile-3.tsx"
    }
  ],
  "meta": {
    "height": "509px",
    "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": [
    "profile"
  ],
  "type": "registry:block"
}