Components
Loading preview...
Here is Avatars component
npx shadcn@latest add https://21st.dev/r/float_ui/avatars"use client";
import * as Avatar from "@radix-ui/react-avatar";
import React from "react";
const avatarData = [
{ name: "CT", imgURL: "https://randomuser.me/api/portraits/women/79.jpg" },
{ name: "CT", imgURL: "https://randomuser.me/api/portraits/med/men/75.jpg" },
{
name: "CT",
imgURL:
"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80",
},
{ name: "CT", imgURL: "https://randomuser.me/api/portraits/men/18.jpg" },
{ name: "CT", imgURL: "https://randomuser.me/api/portraits/med/men/36.jpg" },
{ name: "CT", imgURL: "https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg" },
];
export default function AvatarOverflow() {
return (
<div className="flex items-center justify-center">
{/* Overlapping avatars only */}
<div className="flex -space-x-2">
{avatarData.map((item, idx) => (
<Avatar.Root
key={idx}
className="bg-white border-2 border-white h-10 w-10 flex items-center justify-center overflow-hidden rounded-full"
>
<Avatar.Image
src={item.imgURL}
alt={`${item.name} avatar`}
className="h-full w-full object-cover"
/>
<Avatar.Fallback
delayMs={600}
className="text-xs font-medium text-gray-600"
>
{item.name}
</Avatar.Fallback>
</Avatar.Root>
))}
</div>
{/* Normal flow elements: fully visible */}
<div
className="ml-3 flex items-center justify-center w-10 h-10 rounded-full border-2 border-white bg-gray-50 text-gray-600 text-xs font-medium"
title="100 more"
aria-label="100 more members"
>
+100
</div>
<button
type="button"
className="ml-3 flex items-center justify-center w-10 h-10 rounded-full border border-dashed bg-white hover:bg-gray-50 active:bg-gray-100 text-gray-400"
aria-label="Add member"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
</svg>
</button>
</div>
);
}