ComponentsOverlays
Avatar Tags
A row of overlapping avatars, each with an ink name tag that springs in and leans with the pointer.
This example uses sample data from this site: data.ts, which also needs art.ts. Copy those files from the repository, or use your own data in their place.
"use client";
import { AvatarTags } from "@/components/miyuki-ui/avatar-tags";
import { people } from "@/registry/lib/data";
const crew = people.slice(0, 6).map((p) => ({
id: p.handle,
name: p.name,
designation: p.role,
image: p.avatar,
}));
export default function AvatarTagsDemo() {
return <AvatarTags items={crew} aria-label="Weekend crew at the Hakuba hut" />;
}Install
npx shadcn@latest add @miyuki-ui/avatar-tagsThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.