Timeline

A customizable, visual timeline component for presenting events, steps, or chronological tasks.

Components Layout

import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineHeader,
  TimelineItem,
  TimelineTime,
  TimelineTitle,
} from "kombase";

export default function TimelineDemo() {
  return (
    <Timeline activeIndex={1}>
      <TimelineItem>
        <TimelineDot />
        <TimelineConnector />
        <TimelineContent>
          <TimelineHeader>
            <TimelineTitle>Step Title</TimelineTitle>
            <TimelineTime dateTime="2025-01-01">January 1, 2025</TimelineTime>
          </TimelineHeader>
          <TimelineDescription>Detailed step description.</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}