Timeline

Display a list of events in chronological order.

Basic Timeline

Order Placed

Your order #12345 has been placed successfully.

Processing

Your order is being processed and prepared for shipping.

Shipped

Your order has been shipped. Tracking number: TRK123456789.

Delivered

Your order will be delivered soon.

With Icons

Order Confirmed

Your order has been confirmed and is being processed.

Processing

Your order is being prepared for shipping.

Shipping

Your order is on the way.

Delivery

Your order will be delivered soon.

Application Status Timeline

Application Submitted

Your application has been received and is being reviewed.

Initial Review

Your application has passed the initial review.

Interview Scheduled

An interview has been scheduled for March 20, 2023 at 10:00 AM.

Interview Completed

Your interview has been completed. We are evaluating your performance.

Final Decision

A final decision will be made based on your overall application.

Usage

import { Timeline } from "@/components/timeline"
import { CheckCircle, Clock } from 'lucide-react'

export default function MyComponent() {
  return (
    <Timeline
      items={[
        {
          title: "Step 1 Completed",
          content: "First step has been completed successfully.",
          date: "Jan 10, 2023",
          icon: <CheckCircle className="h-4 w-4" />,
          active: true,
        },
        {
          title: "Step 2 In Progress",
          content: "Second step is currently in progress.",
          date: "Jan 12, 2023",
          icon: <Clock className="h-4 w-4" />,
          active: true,
        },
        {
          title: "Step 3 Pending",
          content: "Third step is waiting to be started.",
          date: "Pending",
          active: false,
        },
      ]}
    />
  )
}

Props

Name
Type
Default
Description
items
array
required
Array of timeline items with title, content, icon, date, and active properties.
className
string
undefined
Additional CSS classes to apply to the timeline container.
itemClassName
string
undefined
Additional CSS classes to apply to each timeline item.