Flab UIv0.0.2
MobileA2UI

Timeline

A vertical sequence of events sharing one spine: an approval trail, a set of milestones, an activity feed. Each node carries a tone — and optionally an icon — so status is legible at a glance, while required title and body text keep colour from being the only signal. The connecting rule is drawn per item and dropped on the last one, so the spine stops cleanly at the end; the final connector is resolved for you, so authoring a timeline stays a flat list of items. The live version is on the Project detail and Project chains showcases.

  1. Approved by Ada Okafor

    2h ago

    Signed off the Q3 forecast plan.

  2. Merged FCE-33

    API

    Forecast model service API landed.

  3. Review requested

    3h ago

    Bruno Sato asked for a second pass on the variance fix.

  4. Kickoff scheduled

    Next week

    Rollout planning session with the platform team.

<Timeline>  <TimelineItem    tone="success"    icon={<Check className="size-3.5" />}    title="Approved by Ada Okafor"    meta="2h ago"  >    Signed off the Q3 forecast plan.  </TimelineItem>  <TimelineItem    tone="info"    icon={<GitCommit className="size-3.5" />}    title="Merged FCE-33"    meta="Yesterday"  >    Forecast model service API landed.  </TimelineItem>  <TimelineItem    title="Kickoff scheduled"    meta="Next week"  >    Rollout planning session with the platform team.  </TimelineItem></Timeline>

A neutral tone renders a hollow node for upcoming or quiet steps; omit icon for a small dot instead of a larger glyph.

Parts

PropTypeDefaultNotes
Timelinecontainer—Wraps the items in an ordered list and drops the connector on the last one.
TimelineItemelement—One event: a node plus a title, optional meta and body.

TimelineItem props

PropTypeDefaultNotes
toneBadgeTone'neutral'Node colour; neutral renders a hollow node.
iconReactNode—Glyph inside a larger node; without it the node is a small dot.
titleReactNode—The heading row content.
metaReactNode—Trailing content on the heading row, e.g. a timestamp or badge.
childrenReactNode—Body content beneath the heading.