Timeline

Timeline renders a sequence of dated steps along a track. Each step is positioned by its date, and the component can highlight which steps are in the past, current, or future. It supports horizontal and vertical orientation, optional date labels, and custom start/end nodes.

When to use

• Visualize a process over time — project milestones, approval history, order tracking.
• Show progression with a clear "you are here" state.

Reach for Stepper instead when steps are ordinal (Step 1, 2, 3) rather than dated.

Import

import { Timeline } from '@spartanfx/react';

Basic usage

Provide steps, each with an id, name, and date.

<Timeline
  steps={[
    { id: 'draft', name: 'Draft', date: new Date('2026-01-05') },
    { id: 'review', name: 'In review', date: new Date('2026-02-10') },
    { id: 'approved', name: 'Approved', date: new Date('2026-03-01') },
  ]}
  showDates
  highlightStates
/>

Vertical orientation

<Timeline steps={steps} orientation="vertical" showDates />

Handling clicks

<Timeline
  steps={steps}
  onClick={(step) => console.log('clicked', step.id)}
/>

Key props

Prop	Type	Default	Notes
steps (required)	TimelineStep[]	—	Each step needs id, name, date; icon is optional.
orientation	'horizontal' | 'vertical'	horizontal	Layout direction.
showDates	boolean	—	Show date labels beneath steps.
highlightStates	boolean	—	Distinct styling for passed/current/future.
animateOnMount	boolean	—	Animate the track on mount.
startIcon / endIcon	ReactNode	—	Custom start/end nodes.
onClick	(step) => void	—	Fires when a step is clicked.

See the full generated reference: Timeline API ↗.

See also

• Components overview