Dependency

Relationship requiring one item to precede another.

Design system tokens In progress
Blocks Blocked by Related to
Component library v2

html

<div class="dependency" data-direction="blocks" style="--accent:#D9C8F0;">
  <div class="dependency__item">
    <span class="dependency__label">Design system tokens</span>
    <span class="dependency__pill">In progress</span>
  </div>
  <div class="dependency__relation">
    <span class="dependency__relation-text dependency__relation-text--blocks">Blocks</span>
    <span class="dependency__relation-text dependency__relation-text--blocked-by">Blocked by</span>
    <span class="dependency__relation-text dependency__relation-text--related">Related to</span>
    <svg class="dependency__arrow dependency__arrow--blocks" width="60" height="16" viewBox="0 0 24 12" fill="none" aria-hidden="true"><path d="M1 6h19M15 1l5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <svg class="dependency__arrow dependency__arrow--blocked-by" width="60" height="16" viewBox="0 0 24 12" fill="none" aria-hidden="true"><path d="M23 6H4M9 1L4 6l5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <svg class="dependency__arrow dependency__arrow--related" width="60" height="16" viewBox="0 0 24 12" fill="none" aria-hidden="true"><path d="M1 6h22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="3 3"/></svg>
  </div>
  <div class="dependency__item">
    <span class="dependency__label">Component library v2</span>
  </div>
</div>
<style>
.dependency { font:14px/1.4 system-ui, sans-serif; color:#241430; background:#FAF7F2; padding:16px; border-radius:12px; max-width:380px; box-sizing:border-box; display:flex; flex-direction:column; gap:4px; }
.dependency__item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background:#FFFFFF; border:1.5px solid #24143020; border-radius:10px; }
.dependency__label { font-weight:600; font-size:13px; }
.dependency__pill { font-size:11px; font-weight:600; background:var(--accent); padding:2px 8px; border-radius:999px; }
.dependency__relation { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0; color:var(--accent); }
.dependency__relation-text { display:none; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#241430; }
.dependency__arrow { display:none; }
.dependency[data-direction="blocks"] .dependency__relation-text--blocks,
.dependency[data-direction="blocked-by"] .dependency__relation-text--blocked-by,
.dependency[data-direction="related"] .dependency__relation-text--related { display:block; }
.dependency[data-direction="blocks"] .dependency__arrow--blocks,
.dependency[data-direction="blocked-by"] .dependency__arrow--blocked-by,
.dependency[data-direction="related"] .dependency__arrow--related { display:block; }
</style>

tailwind

<div class="dependency-tw font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 rounded-xl max-w-[380px] box-border flex flex-col gap-1" data-direction="blocks" style="--accent:#D9C8F0;">
  <div class="flex items-center justify-between gap-2 px-3 py-2.5 bg-white border-[1.5px] border-[#24143020] rounded-[10px]">
    <span class="font-semibold text-[13px]">Design system tokens</span>
    <span class="text-[11px] font-semibold px-2 py-0.5 rounded-full" style="background:#D9C8F0">In progress</span>
  </div>
  <div class="flex flex-col items-center gap-0.5 py-1" style="color:#D9C8F0">
    <span class="dependency-tw__text dependency-tw__text--blocks hidden text-[11px] font-bold uppercase tracking-wide text-[#241430]">Blocks</span>
    <span class="dependency-tw__text dependency-tw__text--blocked-by hidden text-[11px] font-bold uppercase tracking-wide text-[#241430]">Blocked by</span>
    <span class="dependency-tw__text dependency-tw__text--related hidden text-[11px] font-bold uppercase tracking-wide text-[#241430]">Related to</span>
    <svg class="dependency-tw__arrow dependency-tw__arrow--blocks hidden" width="60" height="16" viewBox="0 0 24 12" fill="none" aria-hidden="true"><path d="M1 6h19M15 1l5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <svg class="dependency-tw__arrow dependency-tw__arrow--blocked-by hidden" width="60" height="16" viewBox="0 0 24 12" fill="none" aria-hidden="true"><path d="M23 6H4M9 1L4 6l5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <svg class="dependency-tw__arrow dependency-tw__arrow--related hidden" width="60" height="16" viewBox="0 0 24 12" fill="none" aria-hidden="true"><path d="M1 6h22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="3 3"/></svg>
  </div>
  <div class="flex items-center justify-between gap-2 px-3 py-2.5 bg-white border-[1.5px] border-[#24143020] rounded-[10px]">
    <span class="font-semibold text-[13px]">Component library v2</span>
  </div>
</div>
<style>
.dependency-tw[data-direction="blocks"] .dependency-tw__text--blocks, .dependency-tw[data-direction="blocks"] .dependency-tw__arrow--blocks,
.dependency-tw[data-direction="blocked-by"] .dependency-tw__text--blocked-by, .dependency-tw[data-direction="blocked-by"] .dependency-tw__arrow--blocked-by,
.dependency-tw[data-direction="related"] .dependency-tw__text--related, .dependency-tw[data-direction="related"] .dependency-tw__arrow--related { display:block; }
</style>

react

export function Dependency({
  itemA = "Design system tokens",
  itemB = "Component library v2",
  direction = "blocks",
  accent = "#D9C8F0",
  showStatus = true,
}) {
  const relation = {
    blocks: "Blocks",
    "blocked-by": "Blocked by",
    related: "Related to",
  }[direction] ?? "Blocks";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2",
      padding: 16, borderRadius: 12, maxWidth: 380, boxSizing: "border-box", display: "flex", flexDirection: "column", gap: 4 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "10px 12px",
        background: "#FFFFFF", border: "1.5px solid #24143020", borderRadius: 10 }}>
        <span style={{ fontWeight: 600, fontSize: 13 }}>{itemA}</span>
        {showStatus && <span style={{ fontSize: 11, fontWeight: 600, background: accent, padding: "2px 8px", borderRadius: 999 }}>In progress</span>}
      </div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2, padding: "4px 0", color: accent }}>
        <span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "#241430" }}>{relation}</span>
        <svg width="60" height="16" viewBox="0 0 24 12" fill="none" aria-hidden="true">
          {direction === "blocks" && <path d="M1 6h19M15 1l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />}
          {direction === "blocked-by" && <path d="M23 6H4M9 1L4 6l5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />}
          {direction === "related" && <path d="M1 6h22" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeDasharray="3 3" />}
        </svg>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "10px 12px",
        background: "#FFFFFF", border: "1.5px solid #24143020", borderRadius: 10 }}>
        <span style={{ fontWeight: 600, fontSize: 13 }}>{itemB}</span>
      </div>
    </div>
  );
}