Delivery progress

Component 10

About

A React delivery tracking interface with shipment stages and progress details, useful for keeping customers informed throughout an order journey.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Delivery progress to your project and fits it to your theme.

Code

How Delivery progress is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import * as React from "react";
import Component, { type Props, type State } from "@/components/ui/delivery-progress";

const settings = { title: "Good things are on their way." };
export const loopDuration = 6;
const smooth = (x: number) => {
  const n = Math.max(0, Math.min(1, x));
  return n * n * (3 - 2 * n);
};

export function showcase(time: number): State {
  const t = ((time % loopDuration) + loopDuration) % loopDuration;
  const active = t < 1.4 ? 2 : t < 3.1 ? 3 : t < 4.6 ? 1 : 2;
  return { active, expanded: active };
}

export default function Demo(props: any = {}) {
  const { showcaseTime, ...incoming } = props;
  const merged = { ...settings, ...incoming };
  return (
    <Component
      {...merged}
      state={showcaseTime === undefined ? incoming.state : showcase(showcaseTime)}
      seeking={showcaseTime !== undefined || incoming.seeking}
    />
  );
}