Core

Timeline Section

A vertical timeline for ordered steps and events.

Variants

Steps

Order placed

Payment confirmed

Awaiting shipment

timeline.tsx

<TimelineSection
  steps={[
    { icon: CheckIcon, active: true },
    { icon: ClockIcon, active: true },
    { icon: CircleDashedIcon },
  ]}
>
  <div>Order placed</div>
  <div>Payment confirmed</div>
  <div>Awaiting shipment</div>
</TimelineSection>

Dependencies

@/lib/utils

Usage

Install

bun add clsx tailwind-merge

Usage

import { TimelineSection } from '@/components/module/timeline-section'