## Merge Conflict Resolver (S—434)

Resolve git conflict hunks one by one: keep current, incoming or both, preview the merged file, and undo any choice.

- URL: https://sundaeui.dev/components/merge-conflict
- Category: UI components · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/merge-conflict.json`
- Tags: diff, code-review, conflict, merge, developer, git

Each conflict shows both sides with line markers. Choosing a side folds the hunk into the merged result; Both stacks current above incoming.
The header counts what is left, and the merged preview toggles on so you can read the final file before marking it resolved.

### Usage

```tsx
import { MergeConflict } from '@/components/sundae/merge-conflict'

<MergeConflict />
```

### Props

- `file` (`string`, default `'src/config.ts'`): Path shown in the header.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Code review tools, git GUIs, teaching version control.

### When not to use

- Large files with many conflicts: use a three-way editor.

### Accessibility

- Each hunk is a group with labelled actions.
- Remaining-conflict count is announced.
- Reduced motion removes the movement and keeps every state change.