steep components
All components

OrderStatusStepper

Visual progress for an order — Placed → Paid → Shipped → Delivered.

components/order-status-stepper.tsxPeer deps: lucide-react

Live preview

  1. Placed

    May 5

  2. Paid

    May 5

  3. 3

    Shipped

    May 6

  4. 4

    Delivered

Usage

import { OrderStatusStepper } from "@/components/order-status-stepper";

<OrderStatusStepper
  steps={[
    { id: "placed",    label: "Placed",    meta: order.placedAt },
    { id: "paid",      label: "Paid",      meta: order.paidAt },
    { id: "shipped",   label: "Shipped",   meta: order.shippedAt },
    { id: "delivered", label: "Delivered", meta: order.deliveredAt },
  ]}
  currentIndex={statusToIndex(order.status)}
/>