yarn add @twilio-paste/timeline

import { Timeline, TimelineItem } from '@twilio-paste/timeline';

<Timeline>
  <TimelineItem title="Order Placed" timestamp="2 hours ago">
    Your order has been placed successfully.
  </TimelineItem>
  <TimelineItem title="Processing" timestamp="1 hour ago">
    We are preparing your order.
  </TimelineItem>
  <TimelineItem title="Shipped" timestamp="30 minutes ago">
    Your order is on its way.
  </TimelineItem>
</Timeline>

import { SuccessIcon } from '@twilio-paste/icons/esm/SuccessIcon';
import { ProcessingIcon } from '@twilio-paste/icons/esm/ProcessingIcon';

<Timeline>
  <TimelineItem title="Completed" icon={SuccessIcon} timestamp="2 hours ago">
    Task completed successfully.
  </TimelineItem>
  <TimelineItem title="In Progress" icon={ProcessingIcon} timestamp="Now">
    Currently processing.
  </TimelineItem>
</Timeline>

<Timeline>
  <TimelineItem 
    title="Step 1" 
    timestamp="Yesterday"
    collapsible
    collapsibleHeading="View Details"
  >
    Detailed information about step 1.
  </TimelineItem>
  <TimelineItem 
    title="Step 2" 
    timestamp="Today"
    collapsible
  >
    Detailed information about step 2.
  </TimelineItem>
</Timeline>

<Timeline>
  <TimelineItem 
    title="Clickable Item" 
    timestamp="Now"
    onClick={() => console.log('clicked')}
  >
    Click this item to trigger an action.
  </TimelineItem>
  <TimelineItem 
    title="Disabled Item" 
    timestamp="Future"
    disabled
  >
    This item is disabled.
  </TimelineItem>
</Timeline>