Code diff review panel with PR status list

Pairs a code diff with a linked PR list to sell a dev-tool feature. Keep the diff to 2-4 lines, a real full diff breaks the compact card layout.

pattern · linear.app composite cardvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="ldp-wrap">
  <div class="ldp-diff">
    <div class="ldp-diff-head">HomeScreen.tsx</div>
    <div class="ldp-line ldp-del">- if (!isFullySynced) return &lt;Spinner /&gt;</div>
    <div class="ldp-line ldp-add">+ if (syncStatus === Pending) return &lt;Spinner /&gt;</div>
    <div class="ldp-line ldp-add">+ return &lt;Dashboard syncStatus={syncStatus} /&gt;</div>
  </div>
  <div class="ldp-list">
    <div class="ldp-item"><span class="ldp-badge ldp-badge-review">In Review</span>Replace isFullySynced with sync status<span class="ldp-num">#549</span></div>
    <div class="ldp-item"><span class="ldp-badge ldp-badge-review">In Review</span>Show stale-data banner while syncing<span class="ldp-num">#551</span></div>
    <div class="ldp-item"><span class="ldp-badge ldp-badge-progress">In Progress</span>Reduce ETA jitter on poor networks<span class="ldp-num">#554</span></div>
  </div>
</div>

Block id: linear-diff-review-panelvanilla · swap-content

More composite blocks

2x2 benefit grid with embedded UI snippets

cal.com

Pricing feature comparison table with highlighted column

cal.com

Central-hub integration diagram

cal.com

Issue tracker card with live activity feed

linear

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call