Account Galaxy
Prov1.0.0Every account as a dot sized by MRR and marked by health, regrouping into clusters on demand.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { AccountGalaxy, type GalaxyAccount, type GalaxyDimension } from "@/components/ui/notchset/blocks/account-galaxy";
export function Accounts({ accounts, dimensions }: { accounts: GalaxyAccount[]; dimensions: GalaxyDimension[] }) {
return <AccountGalaxy accounts={accounts} dimensions={dimensions} />;
}Props
accounts–{ id, name, mrr, health, groups, meta? }[]health 0–3 (expanding, healthy, watch, at risk); groups maps each dimension id to a group index.
dimensions–{ id, label, groups }[]What GROUP BY offers (plan, region, industry...).
onSelectGroup–(dimension, group | null) => voidA cluster label was picked.
Anatomy
- ALL lays the accounts on a two-armed spiral, largest in the middle.
- A cluster filter and a health filter combine.
- Reduced motion places dots without springing.
AccountGalaxydata-slot="account-galaxy"Group control, the canvas with cluster labels and zoom, and the aside.
Source
components/ui/notchset/blocks/account-galaxy.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/account-galaxyNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Seeing where revenue sits across segments
- Spotting at-risk revenue at a glance
Use something else when
- Exact numbers per account: use a table
- Fewer than about a hundred accounts: use a bubble chart
Mistakes to avoid
- Keep MRR in one currency
- Pass group indexes, not labels, in each account's groups
Agents find it by
- customer health, account map, MRR distribution, churn risk, segmentation, cluster chart, revenue map, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/account-galaxy.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ← →
- Change the grouping
- Tab then Enter
- Filter by a cluster or a health row
Accessibility
- The canvas is a labelled image naming the count, MRR and at-risk MRR; every number is also in the aside
- Cluster labels and health rows are toggle buttons; BY HEALTH is a collapsible with aria-expanded
- The headline MRR is a polite live region
Motion
- Group by
- Dots spring to their clusters with a staggered start
- Filter
- Everything else dims
- Numbers
- MRR and KPIs roll; health bars glide
Responsive
- Under 820px (container width) the aside moves under the canvas; the canvas shortens under 520px.
Performance
- One canvas and a spring per dot; the loop pauses off screen and while the page is hidden. 2,400 dots run at frame rate.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
