Pull request card

Installation

Usage

import { PullRequestCard } from "@/components/ui/chatcn/pull-request-card"

<PullRequestCard
  title="Paginate the runs list"
  number={482}
  status="open"
  repo="brightwell/console"
  branch="feat/runs-pagination"
  baseBranch="main"
  author={{ name: "Fern", kind: "agent" }}
  files={files}
  checks={checks}
  review={{ state: "approved", reviewers: ["Ines Duarte"] }}
  href={pr.html_url}
  merging={merging}
  onMerge={merge}
/>

The card takes plain props, so it works with any Git host. Map your API response once: files takes the same shape as ChangedFiles (a DiffFile from chatcn-diff fits), checks is a list of check runs, and review is the review decision with reviewer names. Without a file list, pass stats for the totals.

Merge is gated the way hosts gate it: the pull request must be open and not a draft, without conflicts, with every required check passed and an approving review. Checks marked required: false never block. When the gate is closed, Merge stays disabled and the merge row says why in one sentence, linked to the button with aria-describedby. Pass canMerge when your host already decided, and blockedReason to explain branch protection in your own words.

// Your host knows best: let it decide, and say why when it says no.
<PullRequestCard
  {...props}
  canMerge={pr.mergeable_state === "clean"}
  blockedReason="Merging needs a review from a code owner of src/lib."
  mergeError={error ? "main moved while merging. Update the branch, then retry." : undefined}
/>

Examples

Failing checks and blocked merges

Failing checks sort to the top and open the list by themselves. Each check shows its result line, its duration once finished, and a Details link. Merge stays disabled with the reason: failing required checks, requested changes or conflicts with the base branch.

States

Draft offers Ready for review instead of Merge. Merged and closed settle into one line with who did it. A failed merge says how to fix it and offers Retry merge. loading draws a static skeleton in the card's final shape.

Compact rows

variant="compact" is one 40 px line for chat answers and lists: status glyph, title, number, check counts with glyphs and the +/- counts. With href, the whole row is the link.

Status colors

Checks use the kit's status vocabulary: a green check for passed, a red cross for failed, a blue spinner for running, a dashed gray circle for queued and a gray minus for skipped. Every color has a glyph and a word next to it.

Props

mergeGate, sortChecks and summarizeChecks are exported too, for when you want the same rules elsewhere, such as in a notification.

Keyboard

Accessibility

• Status is always a word next to the glyph. Colors back it up and never carry it alone.
• A disabled Merge button points at the sentence that explains it with aria-describedby.
• Each check reads its name, result and duration, and Details links are named, for example Details for ci / lint.
• Merged, closed and a failed merge are announced once through a polite live region.
• The compact row starts with hidden text such as Open pull request 482, so a list of rows reads well.
• Rows and buttons grow to 44 px on touch screens. Branches are mono and the arrow between them flips in right to left layouts.

Motion

• The status glyph and each row glyph swap with the kit's 150 ms blur crossfade, so open to merging to merged reads as one object changing.
• The files and checks lists open with a 200 ms height and opacity transition; the chevron turns in the same 200 ms.
• Merging is the only shimmer, on its one status label. Under reduced motion the crossfades and height transitions are dropped and the spinner slows down.