Skip to content
Paramanu v0.1.0-alpha.0

Timeline

Timeline displays a sequence of events with dot indicators, connectors, and content areas. Supports vertical/horizontal orientation and multiple alignment options.

Basic Usage

  1. First event
  2. Second event
import { Timeline, TimelineItem, TimelineDot, TimelineConnector, TimelineContent } from "@paramanu/data-display-react"


export default function App() {
return (
  <Timeline>
    <TimelineItem>
      <TimelineDot />
      <TimelineConnector />
      <TimelineContent>First event</TimelineContent>
    </TimelineItem>
    <TimelineItem>
      <TimelineDot />
      <TimelineContent>Second event</TimelineContent>
    </TimelineItem>
  </Timeline>
)
}
<ol class="pm-timeline pm-timeline--vertical pm-timeline--start">
<li class="pm-timeline__item">
  <span class="pm-timeline__dot"></span>
  <span class="pm-timeline__connector"></span>
  <div class="pm-timeline__content">First event</div>
</li>
<li class="pm-timeline__item">
  <span class="pm-timeline__dot"></span>
  <div class="pm-timeline__content">Second event</div>
</li>
</ol>