About
A grouped view of accounts sharing the same IP address, device fingerprint, or payout wallet, used by fraud and trust-and-safety teams to spot multi-accounting versus a coincidental shared ISP.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds IP Cluster to your project and fits it to your theme.
Code
How IP Cluster is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import IpCluster, {
type Cluster,
type ClusterMember,
} from "@/components/ui/ip-cluster";
const CLUSTERS: Cluster[] = [
{
id: "c1",
value: "45.83.220.11",
kind: "ip",
network: "datacenter",
location: "Frankfurt, DE",
members: [
{ id: "u1", label: "user_88213", detail: "£4,120", focus: true },
{ id: "u2", label: "user_88219", detail: "£3,980", status: "banned" },
{ id: "u3", label: "user_88244", detail: "£4,010", status: "flagged" },
{ id: "u4", label: "user_88301", detail: "£3,870" },
{ id: "u5", label: "user_88355", detail: "£4,200", status: "banned" },
],
},
{
id: "c2",
value: "fp_7be21044c9",
kind: "device",
location: "Chrome 141 · macOS",
members: [
{ id: "u1", label: "user_88213", focus: true },
{ id: "u6", label: "user_90112" },
],
},
{
id: "c3",
value: "92.40.11.7",
kind: "ip",
network: "mobile",
location: "Manchester, UK",
members: [
{ id: "u1", label: "user_88213", focus: true },
{ id: "u7", label: "user_71004" },
{ id: "u8", label: "user_66392" },
],
},
];
export default function IpClusterClickableDemo() {
return (
<div className="bg-background text-foreground w-full max-w-2xl p-6">
<IpCluster
clusters={CLUSTERS}
onSelect={(member: ClusterMember, cluster: Cluster) => {
console.log("open account", member.id, "from cluster", cluster.id);
}}
/>
</div>
);
}
Dependencies
More by astralyxdev
View all
Rate Limit Meter
18
Note Graph
14
Prompt Versions
7
Migration List
7
Checkout Summary
7
Odds Display
5
Budget Guard
5
Attribution
5