## Commit Composer (S—402)

Write a conventional commit: type, scope, a subject held to 50 characters, a wrapped body, and a breaking-change footer.

- URL: https://sundaeui.dev/components/commit-composer
- 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/commit-composer.json`
- Tags: conventional-commits, form, changelog, developer, git, commit-message

Type chips cover feat, fix, docs, refactor, perf, test and chore. The subject counter warns past 50 and blocks past 72, and a trailing period is removed.
The body is wrapped at 72 columns in the preview; marking it breaking adds the ! and a BREAKING CHANGE footer.

### Usage

```tsx
import { CommitComposer } from '@/components/sundae/commit-composer'

<CommitComposer />
```

### Props

- `scopes` (`string[]`): Suggested scopes.
- `onCommit` (`(message: string) => void`): Called with the final message.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Git GUIs, PR tools, onboarding to commit conventions.

### When not to use

- Teams without commit conventions.

### Accessibility

- Type is a radio group; the subject counter is tied to the field with aria-describedby.
- The preview is a code block.
- Reduced motion removes the movement and keeps every state change.