Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Repo Bot Pull Request Chat Block for Ark UI

A team channel with a repo bot: it posts a pull request card with branch, author, three checks that sum to 2 of 3 passed, a commit row and an issue row, Re-run on the failed check, and a Merge button that is blocked until the checks pass and then turns the card to Merged.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a repo bot working inside a conversation, with this repo bot pull request chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Forkhurst, a team channel with a repo bot, in which Isaura Pellman pushes a fix and the bot posts a pull request card: the title and number, the branch, the author, a Collapsible of three checks with a state word and glyph each and "2 of 3 checks passed" summed from them, a commit row with a short hash and a status word, and an issue row that reads "Closes" until the merge. "Merge" is blocked while a check has failed and says why; "Re-run" on the failed check runs it again, the bot posts a line when it passes, and Merge then turns the card from Open to Merged. The bot's posts carry a two-letter code-host tile and a Bot Badge. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for an engineering channel, a CI feed or any bot that reports on a repository.

FAQ

What stays in the page, and how do I make it real?

Everything. The repository, the pull request, its checks and the teammate's replies are invented and typed in this file; Re-run passes after a short wait and Merge only changes the card. Nothing is contacted. To wire it for real, call your code host from rerun and merge where the code says so, read the checks from its API and append the bot's posts to the same list.

When can I merge?

When every check has passed. While one has failed the button stays in place but inactive and the card says "Merge is blocked: Integration tests failed."; while it re-runs it says the merge waits. Pressing the inactive button explains in the status line instead of doing nothing. After the merge the button reads Merged, the badge changes from Open to Merged, the issue row reads Closed, and the checks summary stays.

What is worked out from the data?

The checks line ("2 of 3 checks passed"), the commit row's status word, the merge reason and the issue row's Closes or Closed all come from the checks and the merged flag. Re-run one check and every one of them follows.

Why a lettermark and not a logo?

Because a logo belongs to its owner. The tile holds two typed letters in a neutral box, hidden from assistive technology with the name in text beside it; the code has a comment where a logo you have the right to use would go.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log, so the bot's lines are read out. Check states are glyphs with words (Passed, Failed, Running), never colors; the buttons name their check ("Re-run Integration tests"); and the hash and branch stay left to right in right-to-left pages.

How does it look on a phone?

The same single column: the repository badge drops out of the top bar below the small breakpoint, the card's rows wrap and the Merge button sits under its reason. The window keeps its height and only the log scrolls, even at 320 px wide.