KQ-676 · MERCHANT/CLUSTER

Merchant Cluster

A month's merchants as bubbles sized by what they took. The pack settles on snap in a cascade, each bubble growing out of the cluster's centre, and pressing one expands it: the chosen bubble glides to the middle at triple its radius while the rest part onto a ring around it, and the panel underneath opens to that merchant's transactions on a measured height. Bubbles carry a roving tabindex in spend order where arrows step, Home and End reach the largest and smallest, Enter and Space toggle and Escape collapses.

KQ-676 · MERCHANT/CLUSTER

Waylight Pay · card spend, November$962.35

Nov spend $962.35 · 6 merchants · reading —

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/merchant-cluster

Props

merchants: MerchantSpend[]; default —; Merchants with id, name, amount and transactions; bubbles are area-proportional to the amount.
value / defaultValue: string | null; default null; Controlled or initial expanded merchant id; null is the resting cluster.
onValueChange: (id: string | null) => void; default —; Fires from the press, Enter, Space or Escape that expanded or collapsed a bubble.
format: (value: number) => string; default USD Intl.NumberFormat; Formats every amount in the cluster and the panel.
label: string; default Spend by merchant; Names the cluster for assistive technology.

Prop	Type	Default	Description
merchants	MerchantSpend[]	—	Merchants with id, name, amount and transactions; bubbles are area-proportional to the amount.
value / defaultValue	string \| null	null	Controlled or initial expanded merchant id; null is the resting cluster.
onValueChange	(id: string \| null) => void	—	Fires from the press, Enter, Space or Escape that expanded or collapsed a bubble.
format	(value: number) => string	USD Intl.NumberFormat	Formats every amount in the cluster and the panel.
label	string	Spend by merchant	Names the cluster for assistive technology.