shadcn.io is not affiliated with official shadcn/ui
Pull Request Showcase Hero Block for React
A showcase hero for a merge queue: a two-part header with a Shine Button, over a ruled band where a pull request page rises and fades out, with its diff, reviewers, checks and queue position.
Installation
Overview
A showcase hero with a pull request page under the copy, for React with Base UI, shown for Railhead, a merge queue. The header is two parts: the announcement pill and a large headline at the start, and at the end one sentence with a ShineButton link and an outline Button link. Under it a tinted band, ruled from the header with + marks on the rails, holds a wide browser window that rises from the band's floor and fades out at its foot: a title bar with the page's address, the pull request's title, number, status and branches, a tab row with Files changed open, and a diff of the token-refresh change in monospace, removed and added lines tinted. Beside the diff, from md, a sidebar lists the reviewers, three passing checks and the merge queue's position with a remove button. The window drops its sidebar on narrower screens and is cut short on phones, so the action stays on the first screen. It's built from Announcement, Status, Shine Button, Button, Badge, Avatar and Guides with Lucide icons and Tailwind CSS, and the window settles in with a CSS transition that stays still under reduced motion. For code review tools, merge queues, pull request bots, CI status products and developer collaboration tools.
FAQ
How do I change the pull request?
Edit the constants at the top of the file: BRANCH, BASE_BRANCH, PR_NUMBER, PR_TITLE, TABS and OPEN_TAB, FILE, DIFF, REVIEWERS and CHECKS. Each diff line has its number, a kind (add, remove or context) and its text. The additions and removals in the file header are counted from DIFF, so they always match the lines below them.
How are the diff lines drawn?
Each line is a row with its number, a sign and the code, in monospace, with dir="ltr" so the code keeps its order in a right-to-left page. Added lines carry a tint of the theme's success colour and removed lines of the destructive colour, at 10%, with the text in the normal foreground, so the code stays readable at AA. There is no syntax colouring: the window is greyscale apart from those two tints.
Why does the window fade out at the bottom?
It's a showcase: the visual runs on below the header and is cut by the band's floor, with a mask that fades its last third. The window is taller than the band, which is 32rem tall from sm and 18rem on phones. Change sm:h-[32rem] on the band's inner box to show more or less of the page.
How does a screen reader read this hero?
It reads the announcement link, the h1, the paragraph and the two links. The pull request is an illustration of the product, so the band is aria-hidden and inert: its remove button is a styled label, not a button, and nothing in it can take focus. If the pull request is your content, take aria-hidden and inert off the band and make the queue button a real Button.
Can I show a real pull request?
Yes. Load the pull request from your Git host on the server and pass its title, number, branches, reviewers, checks and a few diff lines in place of the constants. The window only reads those values, so the layout stays the same. Keep the diff to about a dozen lines: the band shows roughly that many before the fade.
How does the hero fit on a phone?
The header's two parts stack, the headline first, then the sentence and the two actions, and the band follows under a ruled line. On phones the window shows its title bar, the pull request header and the top of the diff in an 18rem band; long titles and addresses end with an ellipsis, so nothing scrolls sideways down to 320 px.
Related
- --++Pro
Split Layout Code Diff Hero
Code and terminalA showcase hero for a code review tool: a centred headline, a Shine Button, a second action and three ticks over a wide pull request window in a hairline frame, with a diff whose changes play out line by line.
- Pro
Split Layout Commit Graph Hero
Code and terminalA reverse split hero for a code host: a commit history drawn as a branch graph in a hairline frame on the start side, then an announcement link, the headline, a Shine Button and three ticks.
- Pro
Split Layout Dark Terminal Hero
Code and terminalA split hero for an API: the headline, a Shine Button and three ticks beside a dark terminal with a request, a status and a JSON response that writes itself out, above a band of three figures.
- Pro
Split Kanban Board Hero
Product windowsA reverse split hero for a sprint planner: a wide board window that runs flush to the start rail and fades at its foot, with a card mid-drag over a drop slot, then a divider and the copy with a Shine Button.
- Pro
Split Feature Flags Hero
Product windowsA split hero for a feature-flag service: the headline, a Shine Button and three ticks beside a narrow flags dashboard in a hairline frame, with environment tabs, rollout meters and a working switch on every flag.
- Pro
Split Log Viewer Hero
Code and terminalA showcase hero with the headline and a Shine Button above a wide log window whose lines stream in like a live tail, in a hairline frame between solid rails.