Add this component

npx zentauri-ui add orbit-system

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Data visualization

3D Orbit System for connected ideas

Arrange skills, technologies, team members, or product features on layered orbital rings. Each ring can set its own radius, speed, direction, and label while the scene provides camera and selection controls.

YOUR STACK

Orbit system playground

Drag the scene to change the viewing angle, scroll to zoom, or select a technology. Focus the scene for keyboard controls.

AppearanceSizeAuto rotateInteractive

Two orbit technology map

YOUR STACK

All appearances

Select a palette to apply it to the live orbital scene.

Orbit System API

Generated from the package prop types and variant definitions.

Orbit

OrbitProps

Behavior

Prop	Type	Default
directionMotion direction. Defaults to clockwise.	`'clockwise' \| 'counterclockwise' \| undefined`	none
durationSeconds per revolution. Defaults to 28.	`number \| undefined`	none
labelAccessible ring label.	`string \| undefined`	none
phaseRotational offset in degrees.	`number \| undefined`	none
radius*Radius of the ring in pixels.	`number`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

OrbitItem

OrbitItemProps

Behavior

Prop	Type	Default
anglePosition around the ring in degrees. Evenly spaced when omitted.	`number \| undefined`	none
labelSpoken item label when content is not text.	`string \| undefined`	none
onSelect	`((id: string) => void) \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
idStable id used for controlled selection. Defaults to a generated id.	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLButtonElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

OrbitSystem

OrbitSystemProps

Variants

Prop	Type	Default
appearance	`amberbluecyandefaultdestructiveemeraldglassgradient-bluegradient-emeraldgradient-roseinfoprimary`+6	default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
autoRotateContinuously advance the items. Defaults to true; respects reduced motion.	`boolean \| undefined`	none
defaultSelectedIdInitial selected item id.	`string \| null \| undefined`	none
interactiveEnable dragging, zooming and item selection. Defaults to true.	`boolean \| undefined`	none
onSelectionChange	`((id: string \| null) => void) \| undefined`	none
pausedSuspend orbital motion.	`boolean \| undefined`	none
selectedIdControlled selected item id.	`string \| null \| undefined`	none
showControlsShow pause and zoom buttons. Defaults to true.	`boolean \| undefined`	none
tiltInitial camera tilt in degrees, clamped to 15–75. Defaults to 55.	`number \| undefined`	none
zoomInitial camera magnification, clamped to 0.5–2. Defaults to 1.	`number \| undefined`	none

Content

Prop	Type	Default
centerContent rendered at the center of the orbital plane.	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

OrbitSystemVariant

OrbitSystemVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'blue' \| 'cyan' \| 'slate' \| 'rose' \| 'emerald' \| 'gradient-blue' \| 'violet' \| 'amber' \| 'glass' \| 'success' \| 'warning' \| 'info' \| 'secondary' \| 'destructive' \| 'primary' \| 'gradient-rose' \| 'gradient-emerald' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

CSS variable overrides

Orbit System CSS variables

Theme the orbital surface, rings, core, items, controls, and appearance accents.

70 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-orbit-system-amber-accent: #d97706;
  --zui-orbit-system-bg: #f8fafc;
  --zui-orbit-system-blue-accent: #3b82f6;
  --zui-orbit-system-border: #cbd5e1;
  --zui-orbit-system-control-bg: #fff;
  --zui-orbit-system-control-border: #cbd5e1;
  --zui-orbit-system-control-fg: #334155;
  --zui-orbit-system-core-bg: #eef2ff;
  --zui-orbit-system-core-border: #a5b4fc;
  --zui-orbit-system-core-fg: #312e81;
  --zui-orbit-system-core-glow: rgba(99,102,241,0.35);
  --zui-orbit-system-cyan-accent: #0891b2;
  --zui-orbit-system-default-accent: #6366f1;
  --zui-orbit-system-destructive-accent: #dc2626;
  --zui-orbit-system-emerald-accent: #059669;
  --zui-orbit-system-fg: #0f172a;
  --zui-orbit-system-glass-accent: #64748b;
  --zui-orbit-system-glow: rgba(99,102,241,0.18);
  --zui-orbit-system-gradient-blue-accent: #2563eb;
  --zui-orbit-system-gradient-emerald-accent: #059669;
  --zui-orbit-system-gradient-rose-accent: #e11d48;
  --zui-orbit-system-info-accent: #0284c7;
  --zui-orbit-system-item-bg: #fff;
  --zui-orbit-system-item-border: #c7d2fe;
  --zui-orbit-system-item-fg: #1e293b;
  --zui-orbit-system-item-shadow: rgba(30,41,59,0.16);
  --zui-orbit-system-primary-accent: #2563eb;
  --zui-orbit-system-ring: rgba(99,102,241,0.38);
  --zui-orbit-system-ring-glow: rgba(99,102,241,0.13);
  --zui-orbit-system-rose-accent: #e11d48;
  --zui-orbit-system-secondary-accent: #64748b;
  --zui-orbit-system-slate-accent: #475569;
  --zui-orbit-system-success-accent: #16a34a;
  --zui-orbit-system-violet-accent: #7c3aed;
  --zui-orbit-system-warning-accent: #d97706;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-orbit-system-amber-accent-dark: #fcd34d;
  --zui-orbit-system-bg-dark: #020617;
  /* ...same variables with -dark at the end */
}

What it does

ZuiOrbitSystem renders one or more labeled ZuiOrbit rings. ZuiOrbitItem distributes items evenly or uses a custom angle, with depth scaling and responsive ring sizing.

Camera and selection

Drag to change the viewing angle, zoom with the mouse wheel or toolbar, and select items with controlled or uncontrolled state.

Motion and accessibility

Native buttons keep items keyboard accessible. The orbital scene is focusable and supports arrow keys for angle and tilt, plus or minus for zoom. Motion respects reduced-motion settings.

Common use cases

Show the technologies behind a product.
Map a team's skills or responsibilities.
Explore features in a product landing page.
Build a portfolio or organization visualization.

FAQ

Does Orbit System need a 3D renderer?

No. It projects orbital coordinates into a responsive DOM scene, so no WebGL or extra rendering package is required.

Can users control the camera and select items?

Yes. Drag to rotate and tilt, scroll or use the controls to zoom, and click an item to select it. The scene also supports arrow keys and plus or minus for keyboard camera control.

Does animation respect reduced motion?

Yes. Automatic orbital motion stops when the user prefers reduced motion, and it can also be disabled with autoRotate or paused.