shadcn.io is not affiliated with official shadcn/ui
Git Branches and Commits Command Menu Block for Radix UI
A git client's command menu shown open above the branch chip of a drawn editor: three branches, five changed files with a checkbox each, a Stash row, recent commits, and a message field whose Commit needs a message and a staged file.
Installation
Overview
Stage, stash and commit without leaving the editor with this git command menu for React with Radix UI. It rises from the branch chip of the status bar in Forkhill, a git client, whose header holds an outline field with its ⌘ K cap, and the editor is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command with four groups: Branches (Enter switches, and the chip changes), Changed files with a Checkbox each (Enter stages or unstages), an Actions group with Stash staged changes, which clears the ticks, and Recent commits. A message field and a Commit button sit under the list: Commit works only with a message and at least one staged file, and then adds the commit to the top of Recent commits while the files it took leave Changed files. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same branches, files and query. For editors, git clients and Git hosts where the commit is a few keys.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of an editor with a status bar, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a staged file or a commit in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
When can I commit?
When at least one file is staged and the message is not empty. Until then the Commit button stays quiet (it is aria-disabled, not removed from the tab order) and the line under the field says what is missing: "Stage a file to commit it." or "Write a message to commit 2 files." Pressing it anyway, or Enter in the field, says the same on the status line. A commit adds a row to Recent commits with a made-up hash and a fixed time, the staged files leave Changed files, and the message clears.
How do the checkboxes work?
The row is the control: Enter, or a click anywhere on it, stages or unstages the file. The checkbox is a picture of the state, so it is inert and hidden from assistive technology, and the row's text says "staged" or "not staged" with the file's state (Modified, Added or Deleted). The foot counts "5 changed · 1 staged" until you type.
What does Stash do?
It clears the ticks of every staged file, and the files stay in Changed files. The row says how many it will clear, and with nothing staged Enter on it says there is nothing to stash. No stash entry is created.
What stays local, and how do I wire it?
All of it. The branches, files and commits are constants and nothing touches a repository. In your app read the working tree in START_CHANGES, run git add, git stash and git commit through your backend in pick and commit, and replace hashOf with the hash the commit returns.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter switches, stages, stashes or reads, and Tab reaches the message field and Commit. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.