{"name":"avatar","title":"Avatar","description":"An image element with a fallback for representing the user.","installCommand":"bunx marko-ui add avatar -y","usageTags":"<Avatar>","importSnippet":"import Avatar from \"@/components/ui/avatar/avatar.marko\";","usageSnippet":"<Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>","tags":["Avatar","AvatarBadge","AvatarGroup","AvatarGroupCount"],"parts":[{"name":"badge","description":"Renders an `AvatarBadge` (or any markup) as a root-level sibling of the image/fallback, per upstream's Composition tree — never inside the fallback span."}],"props":[{"name":"alt","type":"string","required":false},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"fallback","type":"string","required":false},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the avatar. Useful for composition."},{"name":"size","type":"'default' | 'sm' | 'lg'","required":false,"description":"Size variant — also exposed as `data-size` for group/badge styling."},{"name":"src","type":"string","required":false}],"events":[{"name":"onStatusChange","arg":"StatusChangeDetails","description":"Functional called when the image loading status changes."},{"name":"statusChange","arg":"avatarMachine.LoadStatus"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"avatar-demo","title":"Basic","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<div class=\"flex flex-row flex-wrap items-center gap-8\">\n  <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n  <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" fallback=\"ER\"/>\n  <Avatar fallback=\"LR\"/>\n</div>","description":"An avatar with an image, and one falling back to initials when it has no `src`."},{"id":"avatar-basic","title":"Basic image","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\" class=\"grayscale\"/>","description":"A basic avatar with an image and a fallback."},{"id":"avatar-fallback","title":"Fallback","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<Avatar fallback=\"CN\"/>","description":"Without a `src`, the fallback content renders immediately."},{"id":"avatar-broken-image","title":"Broken image","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<Avatar src=\"https://broken-image-url.example/none.png\" alt=\"Broken\" fallback=\"BR\"/>","description":"When `src` fails to load, the machine reports an `error` status and the fallback takes over."},{"id":"avatar-custom-fallback","title":"Custom fallback content","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<Avatar>\n  <span class=\"text-xs font-medium\">JD</span>\n</Avatar>","description":"Pass a body instead of `fallback` for arbitrary fallback markup, such as an icon."},{"id":"avatar-controlled","title":"Controlled","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<let/status=\"unknown\"/>\n<let/src=\"https://github.com/shadcn.png\"/>\n\n<div class=\"flex flex-col items-start gap-3\">\n  <Avatar\n    src=src\n    alt=\"Controlled avatar\"\n    fallback=\"CN\"\n    statusChange(nextStatus) { status = nextStatus; }\n  />\n  <div class=\"flex gap-2\">\n    <button type=\"button\"\n      class=\"border-input rounded-md border px-2 py-1 text-sm\"\n      onClick() { src = \"https://github.com/shadcn.png\"; }\n    >\n      Valid src\n    </button>\n    <button type=\"button\"\n      class=\"border-input rounded-md border px-2 py-1 text-sm\"\n      onClick() { src = \"https://broken-image-url.example/none.png\"; }\n    >\n      Broken src\n    </button>\n  </div>\n  <p class=\"text-muted-foreground text-sm\">Status: ${status}</p>\n</div>","description":"Listen for `statusChange` to react to `loading`, `loaded`, or `error` as `src` changes.","essential":true},{"id":"avatar-badge","title":"Badge","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport AvatarBadge from \"@marko-ui/shadcn/ui/avatar/badge.marko\";\n\n<Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\">\n  <@badge>\n    <AvatarBadge class=\"bg-green-600 dark:bg-green-800\"/>\n  </@badge>\n</Avatar>","description":"Pass an `AvatarBadge` through the `@badge` slot to add a badge to the avatar, positioned at the bottom right. Use `class` to customize its color and size."},{"id":"avatar-badge-icon","title":"Badge with Icon","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport AvatarBadge from \"@marko-ui/shadcn/ui/avatar/badge.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<Avatar src=\"https://github.com/pranathip.png\" alt=\"@pranathip\" fallback=\"PP\" class=\"grayscale\">\n  <@badge>\n    <AvatarBadge>\n      <Icon name=\"Plus\"/>\n    </AvatarBadge>\n  </@badge>\n</Avatar>","description":"You can also render an icon inside `AvatarBadge`."},{"id":"avatar-group","title":"Avatar Group","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport AvatarGroup from \"@marko-ui/shadcn/ui/avatar/group.marko\";\n\n<AvatarGroup class=\"grayscale\">\n  <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n  <Avatar src=\"https://github.com/maxleiter.png\" alt=\"@maxleiter\" fallback=\"LR\"/>\n  <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" fallback=\"ER\"/>\n</AvatarGroup>","description":"Use `AvatarGroup` to render a group of overlapping avatars."},{"id":"avatar-group-count","title":"Avatar Group Count","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport AvatarGroup from \"@marko-ui/shadcn/ui/avatar/group.marko\";\nimport AvatarGroupCount from \"@marko-ui/shadcn/ui/avatar/group-count.marko\";\n\n<AvatarGroup class=\"grayscale\">\n  <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n  <Avatar src=\"https://github.com/maxleiter.png\" alt=\"@maxleiter\" fallback=\"LR\"/>\n  <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" fallback=\"ER\"/>\n  <AvatarGroupCount>+3</AvatarGroupCount>\n</AvatarGroup>","description":"Use `AvatarGroupCount` to add a count indicator to the group."},{"id":"avatar-group-count-icon","title":"Avatar Group with Icon","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport AvatarGroup from \"@marko-ui/shadcn/ui/avatar/group.marko\";\nimport AvatarGroupCount from \"@marko-ui/shadcn/ui/avatar/group-count.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<AvatarGroup class=\"grayscale\">\n  <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n  <Avatar src=\"https://github.com/maxleiter.png\" alt=\"@maxleiter\" fallback=\"LR\"/>\n  <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" fallback=\"ER\"/>\n  <AvatarGroupCount>\n    <Icon name=\"Plus\"/>\n  </AvatarGroupCount>\n</AvatarGroup>","description":"You can also render an icon inside `AvatarGroupCount`."},{"id":"avatar-size","title":"Sizes","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<div class=\"flex flex-wrap items-center gap-2 grayscale\">\n  <Avatar size=\"sm\" src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n  <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n  <Avatar size=\"lg\" src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n</div>","description":"Use the `size` prop (\"sm\" | \"default\" | \"lg\") to change the size of the avatar."},{"id":"avatar-dropdown","title":"Dropdown","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport DropdownMenu, { type DropdownMenuItem } from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const ITEMS: DropdownMenuItem[] = [\n  { value: \"profile\", label: \"Profile\" },\n  { value: \"billing\", label: \"Billing\" },\n  { value: \"settings\", label: \"Settings\" },\n  { type: \"separator\" },\n  { value: \"logout\", label: \"Log out\", variant: \"destructive\" },\n];\n\n<DropdownMenu items=ITEMS class=\"w-32\">\n  <@trigger|triggerProps|>\n    <Button type=\"button\" variant=\"ghost\" size=\"icon\" class=\"rounded-full\" ...triggerProps>\n      <Avatar src=\"https://github.com/shadcn.png\" alt=\"shadcn\" fallback=\"CN\"/>\n    </Button>\n  </@trigger>\n</DropdownMenu>","description":"Use `Avatar` as the trigger for a dropdown menu."},{"id":"avatar-rtl","title":"RTL","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport AvatarBadge from \"@marko-ui/shadcn/ui/avatar/badge.marko\";\nimport AvatarGroup from \"@marko-ui/shadcn/ui/avatar/group.marko\";\nimport AvatarGroupCount from \"@marko-ui/shadcn/ui/avatar/group-count.marko\";\n\n<div dir=\"rtl\" class=\"flex flex-row flex-wrap items-center gap-6 md:gap-12\">\n  <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\" class=\"grayscale\"/>\n  <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" fallback=\"ER\">\n    <@badge>\n      <AvatarBadge class=\"bg-green-600 dark:bg-green-800\"/>\n    </@badge>\n  </Avatar>\n  <AvatarGroup class=\"grayscale\">\n    <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n    <Avatar src=\"https://github.com/maxleiter.png\" alt=\"@maxleiter\" fallback=\"LR\"/>\n    <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" fallback=\"ER\"/>\n    <AvatarGroupCount>+٣</AvatarGroupCount>\n  </AvatarGroup>\n</div>","description":"Avatar, badge, and group markup mirror correctly under `dir=\"rtl\"`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{},"nativeAttributes":"span","subcomponents":[{"name":"badge","props":[],"nativeAttributes":"span"},{"name":"group-count","props":[],"nativeAttributes":"div"},{"name":"group","props":[],"nativeAttributes":"div"}]}