Skip to content
Velkin LogoVelkin Logo
Velkin
VELKIN/UI

Modern UI components for product teams and their AI agents. Lit core, typed wrappers, live MCP.

sales@velkinui.com

Product

  • Docs
  • Components
  • Studio
  • Pricing

Resources

  • Quick start
  • Blog
  • Changelog
  • Roadmap
  • Status

Project

  • About
  • Contact
  • License
  • Privacy
  • Terms

© 2026 Velkin. MIT core · Pro licenses available.

VELKIN

Avatar Group

An avatar group component that stacks overlapping avatars.

vu-avatar-group · @velkin/react/avatar-group

Copy page

Import

React
npm i @velkin/react

import { VuAvatarGroup } from "@velkin/react/avatar-group";

Examples

API

Props

PropTypeDefaultDescription
maxnumber0Maximum avatars shown; `0` shows all. Default: `0`.
totalnumber0Explicit total when extras are outside the slot. Default: `0`.
sizeVuAvatarSize"md"Uniform size forwarded to children. Default: `"md"`.
radiusVuAvatarRadius"full"Uniform radius forwarded to children. Default: `"full"`.
spacingVuAvatarGroupSpacing"md"Overlap density. Default: `"md"`.
borderedbooleantrueForwards bordered ring to children. Default: `true`.
disabledbooleanfalseDisables the group and forwards to children. Default: `false`.

Slots

SlotDescription
—- One or more `<vu-avatar>` children.
overflowCustom `+N` overflow indicator.

CSS parts

PartDescription
groupFlex container for avatars and overflow tile.
overflowAuto-rendered `+N` avatar tile.

Types

NameDefinition
VuAvatarGroupSpacing
"sm" | "md" | "lg"
VuAvatarRadius
"sm" | "md" | "lg" | "none" | "full"
VuAvatarSize
"sm" | "md" | "lg"

Related

Data display

  • AvatarAn avatar component with image, initials, icon, or custom content.
  • BadgeA badge component for counts, status dots, and overlay marks.
  • ChipA chip component for tags and filters with dismiss or toggle actions.
  • Data TableA data table component with sorting, filtering, and selection.
  • DividerA divider component for horizontal or vertical layout separation.
  • File ViewerA file viewer component for previewing uploaded or linked files.

Guides

  • AppearanceShared visual props
  • EventsSelection and change events

Browse

  • Previous: AvatarEarlier in the sidebar
  • Next: BadgeLater in the sidebar
  • All componentsBrowse the full index