Timeline Bar

Component

About

A compact horizontal timeline bar with a progress fill, a red progress indicator line, and labeled position markers, styled with a monospace HUD look.

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

Code

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

Usage.tsx

import { TimelineBar } from "@/components/ui/timeline-bar";

export default function TimelineBarDemo() {
  return (
    <div className="flex min-h-[240px] w-full items-center justify-center bg-background p-10 text-foreground">
      <div className="w-full max-w-md">
        <TimelineBar
          leftLabel="00:00"
          rightLabel="16:48"
          progress={62}
          markers={[
            { id: "T-01", position: 12 },
            { id: "T-02", position: 30, active: true },
            { id: "T-03", position: 50 },
            { id: "T-04", position: 68 },
            { id: "T-05", position: 86 },
          ]}
        />
      </div>
    </div>
  );
}