Project milestones

Component 1

About

timeline An interactive React project milestone timeline with selectable stages and progress states, useful for communicating delivery plans and reviewing project status.

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

Code

How Project milestones 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/project-milestones";

const settings = { title: "From first idea to launch." };
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;
  return { active: t < 1.2 ? 2 : t < 2.4 ? 0 : t < 3.6 ? 1 : t < 4.8 ? 3 : 2 };
}

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}
    />
  );
}