Timeline / Activity Feed

Chronological event feed (ordered list). "dots" for compact activity, "icons" for rich histories.

Import

import { Timeline } from '@marbleui/ui'

Props

<Timeline>

Prop	Type	Default
events *required	`TimelineEvent[]`	`—`
className	`string`	`—`
variant	`'dots' \| 'icons'`	`'icons'`

Usage notes

Chronological feed of events as an ordered list, such as order tracking or an audit history. For steps in a process the user moves through, use Stepper; for plain rows use List.

<Timeline
  variant="dots"
  events={[
    { id: '1', title: 'Order placed', time: 'Oct 12, 09:14', tone: 'accent' },
    { id: '2', title: 'Shipped', time: 'Oct 13, 16:02', description: 'DHL' },
  ]}
/>

Each event needs a unique id and a title; time, description, icon and tone are optional.
variant is icons (default; icon is shown in a coloured circle) or dots (compact, ignores icon).
time renders in a <time> element without a dateTime attribute, so it is display text only.

Example source · show

import { Timeline } from './timeline'

const I = ({ d }: { d: string }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
    <path d={d} />
  </svg>
)

const events = [
  { id: '1', title: 'Order placed', time: 'Oct 12, 09:14', description: '3 items · $128.00', tone: 'accent' as const, icon: <I d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0" /> },
  { id: '2', title: 'Payment confirmed', time: 'Oct 12, 09:15', tone: 'success' as const, icon: <I d="m5 12 5 5L20 7" /> },
  { id: '3', title: 'Shipped', time: 'Oct 13, 16:02', description: 'DHL · tracking 1Z999AA1', tone: 'neutral' as const, icon: <I d="M1 3h15v13H1zM16 8h4l3 3v5h-7zM5.5 21a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M18.5 21a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" /> },
  { id: '4', title: 'Delivery delayed', time: 'Oct 15, 08:30', description: 'Weather in the destination area.', tone: 'warning' as const, icon: <I d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0" /> },
]

export const styles = {
  Icons: () => <Timeline events={events} className="w-96" />,
  Dots: () => <Timeline events={events} variant="dots" className="w-96" />,
}

Source: packages/ui/src/timeline/timeline.tsx

Catalog