Canarist UI

Timeline

Vertical timeline of ordered steps or events.

Default

09:32 UTC
Alert triggered: USD/EUR rate exceeded threshold
09:33 UTC
Email notification dispatched to 3 recipients
09:35 UTC
Alert acknowledged by team admin
Monitoring resumed
import { Timeline } from '@canarist/ui'

<Timeline
  steps={[
    { label: '09:32 UTC', children: 'Alert triggered' },
    { label: '09:33 UTC', children: 'Email notification sent' },
    { label: '09:35 UTC', children: 'Alert acknowledged' },
    { children: 'Monitoring resumed' },
  ]}
/>

Reference

PropTypeDefaultDescription
steps{ label?: string; children: ReactNode }[]—Array of timeline steps. Each step has optional label and required content.
classNamestring—Additional CSS classes on the container.