Orbit Diagram
A circular orbit layout with a center node, surrounding orbital nodes, and optional segment labels.
Preview
Import
import { OrbitDiagram } from "@sigil-ui/components";Usage
<OrbitDiagram
center={{ label: "Core" }}
nodes={[
{ label: "Auth" },
{ label: "Storage" },
{ label: "Compute" },
{ label: "Network" },
]}
/>With icons and labels
<OrbitDiagram
size={320}
center={{ label: "Platform", icon: <CpuIcon /> }}
nodes={[
{ label: "API", icon: <GlobeIcon /> },
{ label: "DB", icon: <DatabaseIcon /> },
{ label: "Cache", icon: <ZapIcon /> },
]}
labels={["Read", "Write", "Evict"]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
center | { label, icon? } | — | Center node (required) |
nodes | OrbitNode[] | — | Array of { label, icon? } on the orbit ring (required) |
size | number | 260 | Diagram diameter in pixels |
labels | string[] | [] | Segment labels between orbit nodes |
className | string | — | Additional CSS classes |
Plus all standard <div> HTML attributes.