Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Branch Strategy Onboarding Block for Vue

A branching question with three radio cards (Git Flow, GitHub Flow, Trunk-based) above a drawn branch diagram that redraws with the choice, three pros and the review rule each strategy sets, and one primary that names the choice.

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

Match the repository's rules to how a team already works with this branching step for Vue with Ark UI. It is a step of Boughby, a code-hosting tool, as a whole screen: the page's rails and one band, a step header (“Step 3 of 5” and a hairline) and a framed panel. Three native radio cards choose the strategy; under them a drawn diagram shows four lanes (main, develop, feature and hotfix) with commit dots and the curves where branches split and merge, and it redraws in the same box when the choice changes. Three pros come as a list and a sentence says what the strategy asks for, worked out from the choice (“Merging into main needs one review.”). The one Shine Button names the choice (“Use GitHub Flow”). Nothing is saved.

FAQ

How are the diagrams drawn?

From data, not pictures. Each entry in STRATEGIES lists the lanes it uses, its commits (a lane and a position from 0 to 600) and its links (from one commit to another). pathOf turns a link into a curve and the SVG draws lanes, links and dots. Add a strategy by adding an entry; lanes it doesn't use stay as faint dashes, so every diagram is the same size.

Where does “needs one review” come from?

Each strategy has a reviews number, and ruleOf writes the sentence from it. Git Flow asks for two reviews into main, GitHub Flow and trunk-based ask for one. The pace line (“Branches live a day or two”) is typed beside it. In your app set the same numbers as branch protection.

What does a screen reader get from a drawing?

The figure carries a sentence that describes the strategy in words (label), and the drawing itself is hidden from assistive technology. The lane names are text in a column beside the diagram on wide screens and a line under it on a phone, and the status line repeats the strategy, its rule and its pace when you choose.

What stays local in the demo, and how do I wire it?

Choosing only redraws the page. Use GitHub Flow says Boughby would protect main and saves nothing. In your app send the strategy id to your server where submit says so and create the branch protection rules it implies.

What happens on a right-to-left page?

The diagram is always drawn left to right, because time runs that way in it, and so are the lane names. The cards, the pros and the sentence follow the page's direction.

How does it look on a phone?

The cards stack, the lane names move from a column to one line under the diagram, and the diagram scales down inside its box. The primary pins to the foot of the screen and keeps its words.

All 100 onboarding blocks