## Branch Picker (S—277)

A git branch switcher: search, branches and tags tabs, recent first, ahead/behind counts, and create-from-current.

- URL: https://sundaeui.dev/components/branch-picker
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/branch-picker.json`
- Tags: devtools, branch, picker, git, combobox, switcher

The trigger shows the current branch. The panel filters as you type; if nothing matches, the first row offers to create the typed name from the current branch.
Each branch shows how far ahead or behind main it is, and the default branch carries a label.

### Usage

```tsx
import { BranchPicker } from '@/components/sundae/branch-picker'

<BranchPicker />
```

### Props

- `branches` (`{ name: string; ahead: number; behind: number; recent?: boolean }[]`, required): Branches.
- `tags` (`string[]`): Tags.
- `onChange` (`(name: string) => void`): Called on switch or create.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Repo views, deploy targets, preview environment pickers.

### When not to use

- Choosing among two or three fixed environments: use a segmented control.

### Accessibility

- Search is a combobox controlling a listbox; arrow keys move, Enter picks.
- Escape closes and returns focus to the trigger.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Move
- Enter: Switch or create
- Esc: Close