Timeline

Vertical display timeline.

Import

import { Timeline } from 'rsuite';

// or
import Timeline from 'rsuite/Timeline';

Examples

Basic

Custom active item

By default the last Timeline.Item is marked as active (with a blue dot). You could change this behavior by providing a function for isItemActive prop.

Two preset values are provided for convenience.

  • Timeline.ACTIVE_FIRST Mark the first item as active
  • Timeline.ACTIVE_LAST Mark the last item as active (the default behavior)

Custom alignment

Custom time

Endless

Custom Icon

Props

<Timeline>

Property Type (Default) Description
align 'left' | 'right' | 'alternate' ('left') Timeline content alignment
as ElementType ('ul') You can use a custom element type for this component
children * Timeline.Item[] The content of the component
classPrefix string ('timeline') The prefix of the component CSS class
endless boolean Timeline endless
isItemActive (index: number, totalItemsCount: number) => boolean Determine whether an item should be marked as active

<Timeline.Item>

Property Type (Default) Description
children * ReactNode The content of the component
classPrefix string ('timeline-item') The prefix of the component CSS class
as ElementType ('li') You can use a custom element type for this component
dot ReactNode Customizing the Timeline item
time ReactNode Customizing the Timeline time
Vercel banner