Radial Orbital Timeline

A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Each node represents a data point with title, status, and energy level.

The RadialOrbitalTimeline places event nodes along a circular orbit surrounding a glowing central nucleus. Clicking any node expands a detail card showing completion status, dates, descriptions, energy level progress meters, and interactive connected node links.

Dual Orbit Timeline (Default)

Renders 2 concentric counter-rotating orbital lines for dense timeline items.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Radial Orbital Timeline

npx shadcn@latest add @algorize-ui/radial-orbital-timeline

components/custom/blocks/RadialOrbitalTimeline.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Radial Orbital Timeline to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

ui-card is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/ui-card

Single Orbit Variant

Single Orbit Timeline

Pass orbitCount={1} to render a clean single circular orbit ring.

Props Reference: RadialOrbitalTimeline

Prop	Type	Default	Description
`orbitCount`	`1 \| 2`	`2`	Controls whether the timeline renders `1` single orbital line or `2` concentric counter-rotating orbital lines.
`outerOrbitItems`	`TimelineItem[]`	`undefined`	Dedicated array of timeline items placed on the 1st Outer Orbit Line (rotates CCW).
`innerOrbitItems`	`TimelineItem[]`	`undefined`	Dedicated array of timeline items placed on the 2nd Inner Orbit Line (rotates CW).
`timelineData`	`TimelineItem[]`	`DEFAULT_TIMELINE_DATA`	Combined array of items. Each item can take optional `layer: "outer" \| "inner"` or be auto-distributed across dual orbits.
`className`	`string`	`undefined`	Additional Tailwind CSS class names for custom container styling.