data · Normal DOM only

Avatar · AvatarGroup · Chip

Round (or squared) person / company avatar. AvatarGroup stacks them with overflow. Chip = Avatar + label.

When the data has an image (uploaded photo, logo) Avatar shows it. Otherwise it falls back to the first letter with a deterministic colour hash — same name always gets the same shade. AvatarGroup is the overlapping row commonly seen in collaborator chips. Chip pairs an Avatar with a label and an optional remove button — perfect for "assigned to" fields.

Inside a Twenty front-component, prefer the bridge import

This Avatar · AvatarGroup · Chip is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Avatar } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Avatar, AvatarGroup, Chip } from '@8maverik8/twenty-design';

Examples

Sizes & shapes

ABCDER

tsx
<Avatar placeholder="Alice" size="xs|sm|md|lg|xl" />

AvatarGroup

MembersABCD+

tsx
<AvatarGroup max={4} avatars={[…]} />

Chip

AAlice CooperAAcme Inc.Plain label

tsx
<Chip avatar={{ placeholder: 'Acme' }} onRemove={…}>Acme Inc.</Chip>

Guidelines

✓

Pass placeholder = full name even when src is present.If the image 404s, the first letter still renders with a stable colour.

✓

Cap AvatarGroup at 4 visible + N more.Beyond that the row becomes a smudge — show "+N" instead.