Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Split Layout Commit Graph Hero Block for React

A 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.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A reverse split hero for Branchline, a code host. A commit history drawn as a branch graph sits on the start side in a narrow window, held in a hairline frame with + marks on its corners. A divider runs down the middle, and on the end side come an announcement link, the headline, a Shine Button with an outline second action and three short ticks. Three branches run in their own lanes, each in its own theme colour: main down the full height, feature/auth forking off and merging back in at the top, and fix/types still open. Each commit sits in its branch's lane beside its author's initials, its short hash and its message, with the merge commit drawn larger. The hero follows the theme and keeps the page's solid rails and top rule, so it stacks with the blocks around it. For code hosts, git clients, release management tools and CI/CD products.

FAQ

How do I change the commits and branches?

Edit the constants at the top of the file. BRANCHES lists the branches in lane order, each with a name and a colour role. COMMITS lists the commits newest first, each with its author's initials, a hash, a message and its branch's lane; mark a merge commit with merge: true. EDGES holds the graph's lines: a straight run down a lane, or a curve from a branch commit to the row on main it forks from or merges into, both written with the small toMain helper.

How do the dots stay lined up with the rows?

The graph and the list share one row height: ROW is 36 pixels, and every row in the list is h-9, which is 36 pixels too. Each commit's dot is drawn at the middle of its row from that number. If you change one, change the other, or the dots drift away from their messages.

Which colours do the branches use?

Your theme's: main is the foreground colour, the feature branch the success colour and the fix branch the info colour, for its line, its dots, its author chips and its legend dot alike. The Shine Button is the only primary control in the block. Each branch picks its role in BRANCHES, and the TONES table maps a role to its classes, so a fourth branch is one more entry in each.

How does a screen reader read the hero?

It reads the announcement as a link, then the headline (the block's one h1), the paragraph, the two links and the three ticks. The commit graph is an illustration of the product, so the whole window is hidden from screen readers and inert, out of the tab order. If your product's history matters to the pitch, say it in the copy.

How does it fit on a phone?

The columns stack below the lg breakpoint with the text first, then a rule with + marks, then the graph in its frame, so the Shine Button stays on the first screen. Below the sm breakpoint the hashes step aside, so the messages keep their room, and a message too long for its row ends with an ellipsis. Nothing scrolls sideways down to 320 px.

Does the graph work right to left?

Yes. In a right-to-left page the layout mirrors: the graph moves to the other side, and the graph itself is mirrored, so main stays the lane nearest the edge and the branches fork toward the messages. The hashes keep their own left-to-right direction.

  • Pro

    Pull Request Showcase Hero

    Code and terminal

    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.

  • Pro

    Split Layout Code Diff Hero

    Code and terminal

    A 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 Terminal Install Hero

    Code and terminal

    A compact reverse split hero for an SDK: a dark code window with a deploy call and its JSON response beside the headline, a copyable install command and a Shine Button, over a closing band of three ruled feature cells.

  • Pro

    Showcase File Explorer Hero

    Code and terminal

    A showcase hero for a code editor: a centred headline, a Shine Button and three ticks above a wide editor window in a hairline frame, with a working file tree beside a sketched editor pane.

  • Pro

    Split Architecture Diagram Hero

    Diagrams and maps

    A reverse split hero for an infrastructure platform: a service topology on a tinted canvas flush with the start rail, six icon nodes, a travelling request and an inspector, beside a headline, a Shine Button and three ticks.

  • Pro

    Split Code Preview Hero

    Code and terminal

    A reverse split hero for a job-queue SDK: a code window in a hairline frame with a copy button, beside the headline, three checks and two calls to action.

All 150 hero blocks