A stacked avatar/image pill that fans open on hover, for team badges, social proof, avatar groups and template galleries.
import { ImagesBadge } from "@/components/ui/images-badge";
const images = [
{
src: "https://api.dicebear.com/9.x/shapes/svg?seed=alpha&backgroundColor=1e293b",
alt: "Alpha",
},
{
src: "https://api.dicebear.com/9.x/shapes/svg?seed=beta&backgroundColor=0f172a",
alt: "Beta",
},
{
src: "https://api.dicebear.com/9.x/shapes/svg?seed=gamma&backgroundColor=172554",
alt: "Gamma",
},
{
src: "https://api.dicebear.com/9.x/shapes/svg?seed=delta&backgroundColor=1c1917",
alt: "Delta",
},
{
src: "https://api.dicebear.com/9.x/shapes/svg?seed=epsilon&backgroundColor=14532d",
alt: "Epsilon",
},
{
src: "https://api.dicebear.com/9.x/shapes/svg?seed=zeta&backgroundColor=450a0a",
alt: "Zeta",
},
];
export default function ImagesBadgeDemo() {
return (
<div className="flex min-h-[220px] items-center justify-center">
<ImagesBadge images={images} label="Introducing Marketing Template" />
</div>
);
}