Timeline View

Time-oriented visual schedule.

html

<div class="tl" data-density="Comfortable" style="width:480px;">
  <div class="tl__head">
    <h3 class="tl__title">Project phases</h3>
    <span class="tl__range">Q3 2026</span>
  </div>
  <div class="tl__track">
    <span class="tl__bar tl__bar--a" style="background:#BFD9F2;">Discovery</span>
    <span class="tl__bar tl__bar--b" style="background:#D9C8F0;">Build</span>
    <span class="tl__bar tl__bar--c" style="background:#F5C2E0;">Launch</span>
  </div>
</div>
<style>
.tl { font: 13px/1.3 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; box-sizing: border-box; }
.tl__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.tl__title { margin: 0; font-size: 15px; font-weight: 700; }
.tl__range { font-size: 12px; color: #24143099; }
.tl__track { position: relative; height: 60px; background: #24143010; border-radius: 8px; }
.tl[data-density="Compact"] .tl__track { height: 40px; }
.tl__bar { position: absolute; top: 10px; height: 40px; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-weight: 700; color: #14351f; font-size: 12px; box-sizing: border-box; overflow: hidden; white-space: nowrap; }
.tl[data-density="Compact"] .tl__bar { top: 5px; height: 30px; }
.tl__bar--a { left: 2%; width: 26%; }
.tl__bar--b { left: 30%; width: 40%; }
.tl__bar--c { left: 72%; width: 26%; }
</style>

tailwind

<div class="tl-tw w-[480px] p-[18px] rounded-xl box-border font-sans text-[13px] text-[#241430] bg-[#FAF7F2]" data-density="Comfortable">
  <div class="flex items-baseline justify-between mb-3.5">
    <h3 class="m-0 text-[15px] font-bold">Project phases</h3>
    <span class="text-xs text-[#241430]/60">Q3 2026</span>
  </div>
  <div class="relative h-[60px] bg-[#24143010] rounded-lg tl-tw-track">
    <span class="tl-tw-bar absolute top-2.5 h-10 left-[2%] w-[26%] rounded-md flex items-center px-2.5 font-bold text-[#14351f] text-xs box-border overflow-hidden whitespace-nowrap" style="background:#BFD9F2">Discovery</span>
    <span class="tl-tw-bar absolute top-2.5 h-10 left-[30%] w-[40%] rounded-md flex items-center px-2.5 font-bold text-[#14351f] text-xs box-border overflow-hidden whitespace-nowrap bg-[#D9C8F0]">Build</span>
    <span class="tl-tw-bar absolute top-2.5 h-10 left-[72%] w-[26%] rounded-md flex items-center px-2.5 font-bold text-[#14351f] text-xs box-border overflow-hidden whitespace-nowrap bg-[#F5C2E0]">Launch</span>
  </div>
</div>
<style>
.tl-tw[data-density="Compact"] .tl-tw-track { height: 40px; }
.tl-tw[data-density="Compact"] .tl-tw-bar { top: 5px; height: 30px; }
</style>

react

export function TimelineView({
  title = "Project phases",
  rangeLabel = "Q3 2026",
  density = "Comfortable",
  showLabels = true,
  accent = "#BFD9F2",
}) {
  const compact = density === "Compact";
  const trackHeight = compact ? 40 : 60;
  const barTop = compact ? 5 : 10;
  const barHeight = compact ? 30 : 40;
  const bar = { position: "absolute", top: barTop, height: barHeight, borderRadius: 6, display: "flex", alignItems: "center", padding: "0 10px", fontWeight: 700, color: "#14351f", fontSize: 12, boxSizing: "border-box", overflow: "hidden", whiteSpace: "nowrap" };
  const phases = [
    { name: "Discovery", left: "2%", width: "26%", bg: accent },
    { name: "Build", left: "30%", width: "40%", bg: "#D9C8F0" },
    { name: "Launch", left: "72%", width: "26%", bg: "#F5C2E0" },
  ];
  return (
    <div style={{ font: "13px/1.3 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 480, padding: 18, borderRadius: 12, boxSizing: "border-box" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>{title}</h3>
        <span style={{ fontSize: 12, color: "#24143099" }}>{rangeLabel}</span>
      </div>
      <div style={{ position: "relative", height: trackHeight, background: "#24143010", borderRadius: 8 }}>
        {phases.map((p) => (
          <span key={p.name} style={{ ...bar, left: p.left, width: p.width, background: p.bg }}>{showLabels && p.name}</span>
        ))}
      </div>
    </div>
  );
}