Components
Loading preview...
Here is User Avatars
@user_hardp
npx shadcn@latest add https://21st.dev/r/user_hardp/user-avatars// demo.tsx
import { UserAvatars } from "@/components/ui/user-avatars"
export default function DemoOne() {
const users = [
{ id: 1, name: "Alice", image: "https://i.pravatar.cc/150?img=1" },
{ id: 2, name: "Bob", image: "https://i.pravatar.cc/150?img=2" },
{ id: 3, name: "Charlie", image: "https://i.pravatar.cc/150?img=3" },
{ id: 4, name: "Diana", image: "https://i.pravatar.cc/150?img=4" },
{ id: 5, name: "Eve", image: "https://i.pravatar.cc/150?img=5" },
{ id: 6, name: "Frank", image: "https://i.pravatar.cc/150?img=6" },
{ id: 7, name: "Grace", image: "https://i.pravatar.cc/150?img=7" },
{ id: 8, name: "Hank", image: "https://i.pravatar.cc/150?img=8" },
]
return (
<div className="flex justify-center p-10">
<UserAvatars users={users} maxVisible={5} />
</div>
)
}