Timeline

Timeline lays out an ordered list of events with connecting lines and status dots — use it for audit logs, release histories, order tracking, or any "what happened when" view. Pass an array of items, each with a title and optional description, timestamp, and tone (which colors the dot). Switch between a stacked vertical layout and a scrollable horizontal strip with orientation.

Example

import { Timeline } from '@officina/ui';

function ReleaseHistory() {
  return (
    <Timeline
      items={[
        { id: 'planned', title: 'Planned', description: 'Spec approved', timestamp: 'Mon' },
        { id: 'built', title: 'Built', description: 'Merged to main', tone: 'success' },
      ]}
    />
  );
}

API