A responsive table for listing users that renders a deterministic geometric avatar (blobatar) per row so similar names stay visually distinguishable.
import UserTable from "@/components/ui/user-table";
const users = [
{
id: "s.nakamura@acme.dev",
name: "Satomi Nakamura",
email: "s.nakamura@acme.dev",
role: "Engineering",
status: "active",
lastSeen: "2m ago",
},
{
id: "s.nakagawa@acme.dev",
name: "Sora Nakagawa",
email: "s.nakagawa@acme.dev",
role: "Design",
status: "invited",
lastSeen: "1h ago",
},
{
id: "j.oyelaran@acme.dev",
name: "Jide Oyelaran",
email: "j.oyelaran@acme.dev",
role: "Support",
status: "active",
lastSeen: "3d ago",
},
{
id: "m.alvarado@acme.dev",
name: "Mateo Alvarado",
email: "m.alvarado@acme.dev",
role: "Sales",
status: "suspended",
lastSeen: "2w ago",
},
];
export default function UserTableDemo() {
return (
<div className="w-full max-w-2xl">
<UserTable users={users} caption="Team members" />
</div>
);
}