Avatar stackdata-display

Overlapping avatars with a +N overflow, name tooltips and a deterministic fallback color from chart tokens.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/avatar-stack

의존 아이템avatar locale style tooltip

Default

avatar-stack-demo.tsx

import { AvatarStack } from "@/components/ui/avatar-stack";
const people = [  { id: "1", name: "Alex Kim" },  { id: "2", name: "Dana Park" },  { id: "3", name: "Sam Lee" },  { id: "4", name: "Jo Choi" },  { id: "5", name: "Min Han" },  { id: "6", name: "Rui Wang" },];
export default function AvatarStackDemo() {  return <AvatarStack people={people} max={4} />;}