Avatar group

Show a team or set of contributors in a small space.

npx shadcn@latest add @silicon-ui/avatar-group
identitypeople
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/avatar-group

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/avatar-group/avatar-group.tsx
    • components/silicon-ui/avatar-group/avatar-group.module.css
    • components/silicon-ui/avatar/avatar.tsx shared
    • components/silicon-ui/avatar/avatar.module.css shared
    • components/silicon-ui/lib/silicon-provider.tsx shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { AvatarGroup } from "@/components/silicon-ui/avatar-group/avatar-group";

API reference

PropTypeDefault
members*AvatarGroupMember[]—
maxnumber4
size"sm" | "md" | "lg""md"
labelstring"Team members"

Dependencies

npm
motion
Registry
silicon-motion-tokensavatar