Timeline

Vertical timeline for displaying events.

Props

TimelineProps

Prop	Type	Required	Description
items	TimelineItem[]	Yes	Timeline items
className	string	No	Container class

TimelineItem

Property	Type	Required	Description
id	string	Yes	Unique identifier
title	string	Yes	Item title
subtitle	string	No	Secondary text
icon	ReactNode	No	Custom icon
iconClassName	string	No	Icon container class
badge	ReactNode	No	Badge element
trailing	ReactNode	No	Right-side content
children	ReactNode	No	Additional content

Example

<Timeline
  items={[
    {
      id: '1',
      title: 'Order placed',
      subtitle: '2 hours ago',
      icon: <ShoppingCart />,
    },
    {
      id: '2',
      title: 'Payment confirmed',
      subtitle: '1 hour ago',
      icon: <CreditCard />,
      badge: <Badge>Completed</Badge>,
    },
  ]}
/>

See also

• Timeline (Conceptual)