avatar-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-example",
  "title": "Avatar",
  "registryDependencies": [
    "avatar",
    "button",
    "empty",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-mira/examples/avatar-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-mira/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}