List authored pull requests with merged, open, and closed states.
Renders each pull request with its title, target repository, and state.
Colors and icons distinguish merged, open, and closed states.
Links every row to the pull request on GitHub.
Presentational and prop-driven, so it works with data from any source.
import { GitHubContributionList } from "@/components/github-contribution-list"
import type { GitHubContribution } from "@/lib/get-github-data/github-data"
const CONTRIBUTIONS : GitHubContribution [] = [
{
id: 1 ,
title: "Add structured output support to the agent runtime" ,
repo: "langchain-ai/langchain" ,
url: "https://github.com/langchain-ai/langchain/pull/41188" ,
state: "merged" ,
createdAt: "2026-02-18T10:00:00.000Z" ,
},
{
id: 2 ,
title: "Fix chunk overlap in the sentence splitter" ,
repo: "run-llama/llama_index" ,
url: "https://github.com/run-llama/llama_index/pull/23443" ,
state: "open" ,
createdAt: "2026-02-11T10:00:00.000Z" ,
},
{
id: 3 ,
title: "Document DVC pipeline caching for large datasets" ,
repo: "treeverse/dvc" ,
url: "https://github.com/treeverse/dvc/pull/11105" ,
state: "closed" ,
createdAt: "2026-01-29T10:00:00.000Z" ,
},
]
export default function GitHubContributionListDemo () {
return (
< div className = "w-full max-w-xl p-4" >
< GitHubContributionList
contributions ={ CONTRIBUTIONS }
className = "rounded-xl border border-line"
/>
</ div >
)
}
suppressContentEditableWarning?union suppressHydrationWarning?union popoverTargetAction?union aria-activedescendant?string aria-brailleroledescription?string aria-multiselectable?union aria-roledescription?string dangerouslySetInnerHTML?object onCopy?ClipboardEventHandler < object > onCopyCapture?ClipboardEventHandler < object > onCut?ClipboardEventHandler < object > onCutCapture?ClipboardEventHandler < object > onPaste?ClipboardEventHandler < object > onPasteCapture?ClipboardEventHandler < object > onCompositionEnd?CompositionEventHandler < object > onCompositionEndCapture?CompositionEventHandler < object > onCompositionStart?CompositionEventHandler < object > onCompositionStartCapture?CompositionEventHandler < object > onCompositionUpdate?CompositionEventHandler < object > onCompositionUpdateCapture?CompositionEventHandler < object > onFocus?FocusEventHandler < object > onFocusCapture?FocusEventHandler < object > onBlur?FocusEventHandler < object > onBlurCapture?FocusEventHandler < object > onChange?ChangeEventHandler < object, object > onChangeCapture?ChangeEventHandler < object, object > onReset?ReactEventHandler < object > onResetCapture?ReactEventHandler < object > onSubmit?SubmitEventHandler < object > onSubmitCapture?SubmitEventHandler < object > onInvalid?ReactEventHandler < object > onInvalidCapture?ReactEventHandler < object > onLoad?ReactEventHandler < object > onLoadCapture?ReactEventHandler < object > onError?ReactEventHandler < object > onErrorCapture?ReactEventHandler < object > onKeyDown?KeyboardEventHandler < object > onKeyDownCapture?KeyboardEventHandler < object > onKeyPress?KeyboardEventHandler < object > onKeyPressCapture?KeyboardEventHandler < object > onKeyUp?KeyboardEventHandler < object > onKeyUpCapture?KeyboardEventHandler < object > onAbort?ReactEventHandler < object > onAbortCapture?ReactEventHandler < object > onCanPlay?ReactEventHandler < object > onCanPlayCapture?ReactEventHandler < object > onCanPlayThrough?ReactEventHandler < object > onCanPlayThroughCapture?ReactEventHandler < object > onDurationChange?ReactEventHandler < object > onDurationChangeCapture?ReactEventHandler < object > onEmptied?ReactEventHandler < object > onEmptiedCapture?ReactEventHandler < object > onEncrypted?ReactEventHandler < object > onEncryptedCapture?ReactEventHandler < object > onEnded?ReactEventHandler < object > onEndedCapture?ReactEventHandler < object > onLoadedData?ReactEventHandler < object > onLoadedDataCapture?ReactEventHandler < object > onLoadStart?ReactEventHandler < object > onLoadStartCapture?ReactEventHandler < object > onPause?ReactEventHandler < object > onPauseCapture?ReactEventHandler < object > onPlay?ReactEventHandler < object > onPlayCapture?ReactEventHandler < object > onPlaying?ReactEventHandler < object > onPlayingCapture?ReactEventHandler < object > onProgress?ReactEventHandler < object > onProgressCapture?ReactEventHandler < object > onRateChange?ReactEventHandler < object > onRateChangeCapture?ReactEventHandler < object > onSeeked?ReactEventHandler < object > onSeekedCapture?ReactEventHandler < object > onSeeking?ReactEventHandler < object > onSeekingCapture?ReactEventHandler < object > onStalled?ReactEventHandler < object > onStalledCapture?ReactEventHandler < object > onSuspend?ReactEventHandler < object > onSuspendCapture?ReactEventHandler < object > onTimeUpdate?ReactEventHandler < object > onTimeUpdateCapture?ReactEventHandler < object > onVolumeChange?ReactEventHandler < object > onVolumeChangeCapture?ReactEventHandler < object > onWaiting?ReactEventHandler < object > onWaitingCapture?ReactEventHandler < object > onAuxClick?MouseEventHandler < object > onAuxClickCapture?MouseEventHandler < object > onClick?MouseEventHandler < object > onClickCapture?MouseEventHandler < object > onDoubleClick?MouseEventHandler < object > onDoubleClickCapture?MouseEventHandler < object > onDrag?DragEventHandler < object > onDragCapture?DragEventHandler < object > onDragEnd?DragEventHandler < object > onDragEndCapture?DragEventHandler < object > onDragEnter?DragEventHandler < object > onDragEnterCapture?DragEventHandler < object > onDragExit?DragEventHandler < object > onDragExitCapture?DragEventHandler < object > onDragLeave?DragEventHandler < object > onDragLeaveCapture?DragEventHandler < object > onDragOver?DragEventHandler < object > onDragOverCapture?DragEventHandler < object > onDragStart?DragEventHandler < object > onDragStartCapture?DragEventHandler < object > onDrop?DragEventHandler < object > onDropCapture?DragEventHandler < object > onMouseDown?MouseEventHandler < object > onMouseDownCapture?MouseEventHandler < object > onMouseEnter?MouseEventHandler < object > onMouseLeave?MouseEventHandler < object > onMouseMove?MouseEventHandler < object > onMouseMoveCapture?MouseEventHandler < object > onMouseOut?MouseEventHandler < object > onMouseOutCapture?MouseEventHandler < object > onMouseOver?MouseEventHandler < object > onMouseOverCapture?MouseEventHandler < object > onMouseUp?MouseEventHandler < object > onMouseUpCapture?MouseEventHandler < object > onSelect?ReactEventHandler < object > onSelectCapture?ReactEventHandler < object > onTouchCancel?TouchEventHandler < object > onTouchCancelCapture?TouchEventHandler < object > onTouchEnd?TouchEventHandler < object > onTouchEndCapture?TouchEventHandler < object > onTouchMove?TouchEventHandler < object > onTouchMoveCapture?TouchEventHandler < object > onTouchStart?TouchEventHandler < object > onTouchStartCapture?TouchEventHandler < object > onPointerDown?PointerEventHandler < object > onPointerDownCapture?PointerEventHandler < object > onPointerMove?PointerEventHandler < object > onPointerMoveCapture?PointerEventHandler < object > onPointerUp?PointerEventHandler < object > onPointerUpCapture?PointerEventHandler < object > onPointerCancel?PointerEventHandler < object > onPointerCancelCapture?PointerEventHandler < object > onPointerEnter?PointerEventHandler < object > onPointerLeave?PointerEventHandler < object > onPointerOver?PointerEventHandler < object > onPointerOverCapture?PointerEventHandler < object > onPointerOut?PointerEventHandler < object > onPointerOutCapture?PointerEventHandler < object > onGotPointerCapture?PointerEventHandler < object > onGotPointerCaptureCapture?PointerEventHandler < object > onLostPointerCapture?PointerEventHandler < object > onLostPointerCaptureCapture?PointerEventHandler < object > onWheel?WheelEventHandler < object > onWheelCapture?WheelEventHandler < object > onAnimationStart?AnimationEventHandler < object > onAnimationStartCapture?AnimationEventHandler < object > onAnimationEnd?AnimationEventHandler < object > onAnimationEndCapture?AnimationEventHandler < object > onAnimationIteration?AnimationEventHandler < object > onAnimationIterationCapture?AnimationEventHandler < object > onToggle?ToggleEventHandler < object > onBeforeToggle?ToggleEventHandler < object > onTransitionCancel?TransitionEventHandler < object > onTransitionCancelCapture?TransitionEventHandler < object > onTransitionEnd?TransitionEventHandler < object > onTransitionEndCapture?TransitionEventHandler < object > onTransitionRun?TransitionEventHandler < object > onTransitionRunCapture?TransitionEventHandler < object > onTransitionStart?TransitionEventHandler < object > onTransitionStartCapture?TransitionEventHandler < object >
Pair the list with the get-github-data library to fetch authored pull requests. The mapper drops pull requests against repositories the viewer owns, so only outside contributions are shown:
import { getCachedGithubData } from "@/lib/get-github-data/get-cached-github-data"
import { GitHubContributionList } from "@/components/github-contribution-list"
export async function Contributions () {
const data = await getCachedGithubData ( "vercel" )
return < GitHubContributionList contributions ={ data?.contributions ?? [] } />
}