Component reference

Timeline

An ordered run of events that share one vertical line, newest or most active first.

Preview

Timeline has no story of its own; this one draws it as part of DetailSection.

Sections, timeline, and resource references

Shows the shared detail components on their own; does not simulate a work detail panel.

packages/meowtail/stories/detail-panel.stories.tsxline 14tsx

render: () => (
  <Stack>
    <DetailSection title="Section title" aside="Supporting note">
      <p>The body is provided by the caller.</p>
    </DetailSection>
    <Timeline>
      <TimelineItem
        state="success"
        title="Draft submitted"
        stateLabel="Done"
        description="09:12 · 4 files changed"
      />
      <TimelineItem
        state="returned"
        title="Review returned"
        stateLabel="Returned"
        description="Two comments need a reply before the next run."
      />
      <TimelineItem state="processing" title="Checks running" stateLabel="In progress" />
    </Timeline>
    <ResourceLink href="#sample" title="Sample link" detail="Link style" />
    <ResourceLink
      title="A very long sample resource name to observe how caller-supplied long text behaves"
      detail="Button style"
    />
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Timeline } from "meowtail";

<Timeline>
  <TimelineItem
    state="success"
    title="Draft submitted"
    stateLabel="Done"
    description="09:12 · 4 files changed"
  />
  <TimelineItem
    state="returned"
    title="Review returned"
    stateLabel="Returned"
    description="Two comments need a reply before the next run."
  />
  <TimelineItem state="processing" title="Checks running" stateLabel="In progress" />
</Timeline>

API reference

Props

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as timeline in the meowtail component registry.