{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-2",
  "title": "Compact Profile Card",
  "description": "Compact centered profile card with avatar, role, location, a three column stat strip, and Follow and Message buttons for sidebars or directories.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/profile/2/profile-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardFooter, CardHeader } from \"@/components/ui/card\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst stats = [\n  { label: \"Projects\", value: \"48\" },\n  { label: \"Followers\", value: \"2.1k\" },\n  { label: \"Rating\", value: \"4.9\" },\n]\n\nexport default function ProfileBlock() {\n  const [following, setFollowing] = React.useState(false)\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <Avatar className=\"size-20 border border-border\">\n              <AvatarImage\n                src=\"https://i.pravatar.cc/160?img=12\"\n                alt=\"Marcus Trent\"\n                className=\"grayscale\"\n              />\n              <AvatarFallback>MT</AvatarFallback>\n            </Avatar>\n            <div className=\"flex flex-col items-center gap-1\">\n              <div className=\"flex items-center gap-2\">\n                <h1 className=\"font-heading text-base font-semibold\">\n                  Marcus Trent\n                </h1>\n                <Badge variant=\"secondary\">Pro</Badge>\n              </div>\n              <p className=\"text-sm text-muted-foreground\">Product Designer</p>\n              <p className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n                <IconPlaceholder\n                  lucide=\"MapPin\"\n                  tabler=\"IconMapPin\"\n                  hugeicons=\"MapPinIcon\"\n                  phosphor=\"MapPin\"\n                  remixicon=\"RiMapPinLine\"\n                  className=\"size-3.5\"\n                  aria-hidden=\"true\"\n                />\n                San Francisco, CA\n              </p>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent>\n          <div className=\"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        </CardContent>\n\n        <CardFooter className=\"gap-2\">\n          <Button\n            className=\"flex-1\"\n            aria-pressed={following}\n            variant={following ? \"outline\" : \"default\"}\n            onClick={() => setFollowing((v) => !v)}\n          >\n            {following ? \"Following\" : \"Follow\"}\n          </Button>\n          <Button variant=\"outline\" className=\"flex-1\">\n            Message\n          </Button>\n        </CardFooter>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/profile-2.tsx"
    }
  ],
  "meta": {
    "height": "473px",
    "tier": "free"
  },
  "categories": [
    "profile"
  ],
  "type": "registry:block"
}