Timeline

Activity feeds, changelogs, order history. Pure composition — compose Timeline.Item > (Timeline.Indicator + Timeline.Content) the same way you'd compose Card.

<Timeline>
<TimelineItem>
  <TimelineIndicator variant="success" />
  <TimelineContent>
    <TimelineTitle>Deploy completed</TimelineTitle>
    <TimelineDescription>Production deploy finished successfully.</TimelineDescription>
    <TimelineTime>2 hours ago</TimelineTime>
  </TimelineContent>
</TimelineItem>
<TimelineItem>
  <TimelineIndicator variant="primary" />
  <TimelineContent>
    <TimelineTitle>Build started</TimelineTitle>
    <TimelineTime>3 hours ago</TimelineTime>
  </TimelineContent>
</TimelineItem>
<TimelineItem isLast>
  <TimelineIndicator />
  <TimelineContent>
    <TimelineTitle>Project created</TimelineTitle>
    <TimelineTime>1 day ago</TimelineTime>
  </TimelineContent>
</TimelineItem>
</Timeline>

Editable — change the code above and the preview updates live.

Installation

import { Timeline, TimelineItem, TimelineIndicator, TimelineContent, TimelineTitle, TimelineDescription, TimelineTime } from "@labanaat/ui/timeline";

Props

Prop	Type	Default	Description
isLast	boolean	false	Hides the connector line after this item (on TimelineItem)
variant	"default" \| "primary" \| "success" \| "danger"	"default"	Indicator color (on TimelineIndicator)
icon	ReactNode	—	Icon shown inside the indicator dot (on TimelineIndicator)