Orbit Diagram
Arrange related objects around a central element.
Preview
Import
import { OrbitDiagram } from "@sigil-ui/components";Usage
<OrbitDiagram
center={{ label: "Sigil" }}
nodes={[
{ label: "Tokens" },
{ label: "Components" },
{ label: "Presets" },
{ label: "CLI" },
{ label: "Docs" },
{ label: "Demos" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
center (required) | { label: string; icon?: ReactNode } | — | Center configuration. |
nodes (required) | OrbitNode[] | — | Nodes configuration. |
size | number | — | Sets the component's size. |
labels | string[] | — | Labels configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border-muted | Border muted |
--s-radius-lg | Radius lg |
--s-primary | Primary |
--s-background | Background |
--s-text | Text |
--s-radius-full | Radius full |
--s-border | Border |
--s-surface | Surface |
--s-text-muted | Text muted |
--s-font-mono | Font mono |