Avatar Group

JA

MP

LK

+2

JA

MP

LK

SL

+1

Import

import { Avatars } from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/AvatarsExample.tsx

import { Avatars, Stack } from "@pelagornis/page/components";

const team = [
  { alt: "Jihoon Ahn" },
  { alt: "Mina Park" },
  { alt: "Leo Kim" },
  { alt: "Sora Lee" },
  { alt: "Ren Ito" },
];

export default function AvatarsDemo() {
  return (
    <Stack gap="sizeLarge">
      <Avatars avatars={team} max={3} />
      <Avatars avatars={team} size="lg" layout="spread" max={4} />
    </Stack>
  );
}

Use in MDX

Avatar Group can be written straight in an .mdx page. Import it below the frontmatter. It renders on the server, so no client directive is needed.

src/content/docs/example.mdx

---
title: Example
---

import { Avatars } from "@pelagornis/page/components";

<Avatars avatars={[{ alt: "Jihoon Ahn" }, { alt: "Mina Park" }, { alt: "Leo Kim" }]} max={2} />

Use in Markdoc

pageMarkdoc() registers a avatars tag for this component. Add the preset once in markdoc.config.mjs (see Use in Markdoc), then write the tag in any .mdoc page.

src/content/docs/example.mdoc

{% avatars avatars=[{alt: "Jihoon Ahn"}, {alt: "Mina Park"}, {alt: "Leo Kim"}] max=2 /%}

Attributes use the same names and values as the React props.

Variants

Values the component accepts for each variant prop.

Prop	Values
size	xs sm md lg xl
layout	stack spread

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	avatars

Reference

• RefineUI · Avatar Group for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.