Skip to content
All 6 kits from $99 · Everything Bundle $149

Timeline

DisplayMIT
View in Storybook

A timeline template: a chronological event list with an optional icon, a title, a description, a timestamp, and a connector.

bun add @otfdashkit/ui

Preview

Timeline
Loading Storybook preview…

Code

import { Package } from 'lucide-react'
import { Timeline, TimelineItem } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="max-w-sm">
      <Timeline>
        <TimelineItem title="Order placed" description="Your order has been received" timestamp="2h ago" variant="success" />
        <TimelineItem title="Processing" description="Payment verified" timestamp="1h ago" variant="default" />
        <TimelineItem title="Shipped" description="Package on its way" timestamp="30m ago" variant="warning" />
        <TimelineItem title="Delivered" description="Arrived at destination" timestamp="5m ago" variant="error" />
      </Timeline>
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the Timeline source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
childrenrequiredReactNode
classNamestring