Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Git Branch Manager CRUD Block for Radix UI

A code host's branch table with a New branch popover that names every broken git ref rule, in-place rename, a protect switch that locks rename and delete, and a delete that wants the branch name typed when commits would be lost.

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

Manage the branches of a repository without losing work, with this branch manager for React with Radix UI. A table of eight branches (a card list below the medium breakpoint) shows each name in mono, how far it is ahead of and behind main, the last commit date, a protect Switch and a delete button, under a toolbar with a search Input and a Merged only Toggle. New branch, an outline button in the header, opens a Popover with a base branch and a name checked against git's ref rules: each broken rule is named, and Create branch is the one Shine Button. A name also renames in place with Editable under the same rules. A protected branch can be neither renamed nor deleted, and says why. Deleting a branch with commits that are not on main asks in an Alert Dialog and wants the name typed; a merged branch goes at once with an Undo. For code hosts, release tooling and any list where one name has rules.

FAQ

How do I load my own branches?

Edit BRANCHES: each has an id, a name, ahead and behind counts against main, an ISO date of the last commit, a protect flag and home for the default branch. Merged is derived (nothing ahead), as are the counts in the toolbar. Dates print from a month table, so nothing reads the clock.

Which name rules are checked?

No spaces, no two dots in a row, no leading dash, no .lock ending, none of the characters ~ ^ : ? * [ or a backslash, no trailing slash or dot, and no duplicate. The popover and the in-place rename list every rule a name breaks at once, not only the first, and a rename can't be saved while one is broken.

What does protecting a branch do?

It locks the branch: its name stops being editable and shows "Protected: unprotect it to rename or delete", and its delete button is aria-disabled, so pressing it says the reason in the polite line. The default branch, main, is always protected and its switch says so when pressed. Unprotect with the switch and everything unlocks.

When does a delete ask me to type the name?

Only when the branch has commits that are not on main. The alert dialog says how many ("3 commits are not on main"), Cancel comes first, and Delete branch stays disabled until the name is typed exactly. A merged branch has nothing to lose, so it is deleted at once and the foot offers Undo.

What stays local, and how do I wire real git?

Everything lives in state in this tab: creating, renaming, protecting and deleting push nothing, and a reload brings the eight originals back. In your app call your Git host's API from create, rename, protect and remove, and enforce the ref rules and the protection on the server.

How does it look on a phone?

The table gives way to a card per branch: the name (still editable) and its state on top, then the date, the protect switch and the delete button in one row. The search and Merged only toggle wrap above, and the list scrolls inside its frame.