Customer galaxyPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/customer-galaxy

• Markdown: https://ui.xzero.co.uk/components/blocks/customer-galaxy/markdown

• Access: Xzero Pro

• Registry id: customer-galaxy

• Source file: registry/blocks/customer-galaxy/customer-galaxy.tsx

• Keywords: react data galaxy, customer visualization, canvas particle clusters, zoomable scatter, account explorer, mrr visualization

Use this on a customer success or revenue page to explore where MRR and risk concentrate. Replace the seeded book in galaxy-data.ts with your accounts; clusters, totals and the side panel derive from it.

When to use

• Customer success or revenue pages to explore where MRR and risk concentrate.
• Showcase views that cluster thousands of accounts by plan, region, or health.

When not to use

• Use customers-table when people need to find and act on specific accounts.
• Use semantic-zoom for hierarchical data like teams and projects.
• Use bar-chart for simple totals by segment.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/customer-galaxy

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { CustomerGalaxy } from "@/components/xzero/blocks/customer-galaxy/customer-galaxy";

export default function CustomerSuccessPage() {
  return (
    <section>
      <CustomerGalaxy />
    </section>
  );
}

API reference

CustomerGalaxy

A canvas galaxy of about 2,400 accounts sized by MRR that spirals into clusters by plan, region or health, with pan, zoom and a totals panel. Takes no props; accounts are sample data in galaxy-data.ts.

No props.

Keyboard interactions

Keys	Action
Arrow left / Arrow right	On the grouping tabs, switches grouping; on the stage, flies between clusters by MRR.
Arrow keys	Steps through accounts when a single cluster is in view.
+ / -	Zooms in or out.
Escape	Clears the selected account, then resets the view.
0 / Home	Fits all accounts.

Accessibility

• The stage is role="application" with a roledescription, a text summary label and a keyboard hint.
• Grouping uses a tablist and tabpanel; cluster rows are aria-pressed buttons with MRR and risk in their labels.
• Zoom buttons have labels, and a polite live region announces selections.

Motion

• Accounts drift, then spiral into clusters with spring physics when grouping changes; flying to a cluster eases the camera.
• The tab pill slides with a shared layout spring, and panel rows reorder with layout animation.
• Reduced motion is passed to the engine, which snaps to layouts, and UI transitions become instant.

Responsive behavior

• From an 880px container the totals panel sits beside the stage at 296px; below that it moves under it, and below 620px the stage is 440px tall.
• Touch uses pinch to zoom and double tap; the stage allows vertical page scroll until zoomed in.
• Mouse wheel zoom only takes over for ctrl or pinch gestures and mouse-like wheels, so trackpad scrolling still moves the page.

Performance

• Renders about 2,400 accounts on a 2D canvas with devicePixelRatio capped at 2.
• The loop pauses offscreen via IntersectionObserver and in hidden tabs.

Notes for AI

• Use on a customer success or revenue page to explore where MRR and risk concentrate.
• Replace the seeded accounts in galaxy-data.ts with your book, keeping plan, region, health and MRR fields.

Related

• Revenue globe: A dotted globe where live payments arc home to headquarters, with a replayable day.
• Semantic zoom: An infinite-zoom map of a company that reveals teams, projects, tasks and people as you fly in.
• Cohort retention: A cohort retention triangle that morphs into retention curves and rewashes by segment.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt