Graph orbit

Pro

A relationship graph in true 3D. In two dimensions 56 services and their links overlap into noise; in three, each team is its own cloud and a link between clouds is a line you can follow. Near nodes are larger and darker, far ones smaller and fainter, so depth reads without turning. Pick a node and its neighbours stand out while the rest recede.

Installs components/ui/graph-orbit.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add @caliper/graph-orbit

Drag to turn the graph. Choose a service to see what it connects to.

56 services · 107 links. Showing the busiest first.

When to use #

Use it for

Service dependencies, ownership maps and any network with clusters you want to keep apart.
Exploring who connects to whom, then reading the answer in words.

Skip it when

Fewer than about 12 nodes, which a flat diagram shows better.
Exact path-finding or layout editing; this is for looking, not for drawing.

Decisions #

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

The picture is not the interface: The search box, the list of services and the selected card do the work, and the card names every connection in a live region. The canvas only turns and picks.
Drawn only when something changes: The canvas is sized for the device pixel ratio, repainted on resize and theme change, and idle otherwise. Search and Reset set the pose at once under reduced motion; dragging still turns it.

Usage

You bring nodes, links and group names: Positions come from the cluster and a seed made of the node id, so the layout is the same on every render and in every browser.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/graph-orbit

Adds its 9 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { GraphOrbit } from "@/components/ui/graph-orbit"

The worked example comes with Pro

The 46-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

GraphOrbit

component

PropTypeDefaultDescription

label *string—Names the graph for screen readers, for example "Dependency graph of 56 services".

nodes *readonly GraphNode[]—

edges *readonly GraphEdge[]—Links between node ids. Unknown ids, self links and repeats are ignored.

groupsreadonly GraphGroup[]—Names the clusters. Without it, the distinct `group` values of the nodes are used as they are.

selectedstring | null—The selected node id, or null. Controlled when set.

defaultSelectedstring | nullnull

onSelect((id: string | null) => void)—

nounstring"node"What a node is called in the search box and the card, for example "service".

pluralstring`${noun}s`

statusDepthStatus"ready"

messagesDepthMessages—

onRetry(() => void)—

disabledboolean—

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.