uix-uiAvatar group
Stacked avatars. 3 sizes.
NJIJRS+2
import { Avatar } from "@/components/ui/avatar";
import { AvatarGroup } from "@/components/ui/avatar-group";
export default function Example() {
return (
<AvatarGroup max={3}>
<Avatar initials="NJ" />
<Avatar initials="IJ" />
<Avatar initials="RS" />
<Avatar initials="TA" />
<Avatar initials="SR" />
</AvatarGroup>
);
}
Installation
$ npx uix-ui@latest add avatar-groupThis copies the file into components/ui/avatar-group.tsx in your project. npx shadcn@latest add @uix/avatar-group works too.
Usage
import { AvatarGroup } from "@/components/ui/avatar-group";
<AvatarGroup max={3}>
<Avatar initials="NJ" />
<Avatar initials="IJ" />
<Avatar initials="RS" />
<Avatar initials="TA" />
<Avatar initials="SR" />
</AvatarGroup>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | sm | md | lg | "md" | |
max | number | – | Show this many avatars, then a +N bubble. |
count | React.ReactNode | – | Text of the bubble when you count the rest yourself, for example "+5". |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts