shadcn.io is not affiliated with official shadcn/ui
Commit Message AI Block for Vue
Build a commit message you can trust: staged files with include checkboxes and a derived total, a type, scope, subject with a real 72-character limit, a body, sample subjects, the assembled message and Copy.
Installation
Overview
Help people write a commit message that follows the rules, with this commit helper for Vue with Ark UI. A header and a framed panel with a plus mark on each corner show Commitwren with four staged files at the start, each with an include Checkbox and its plus and minus counts, and a total for the ticked ones ("3 files, +42 −9"). At the end, a Native Select for the type (feat, fix, refactor, docs, chore), a scope Input, a subject with a real limit that counts the whole first line ("38 of 72") and a body Textarea; three typed subject suggestions fill the subject in one press. The message is assembled in Syntax Text, a problem appears while the subject is empty, ends with a full stop or pushes the first line past 72 characters, and the Shine Button, the only colored control, copies the real string or says why it cannot. Guides draw the frame; everything moves with CSS only. For Git clients, release tooling and any form that enforces a format.
FAQ
What stays in the page, and how do I make it real?
All of it. The staged files and the three subject suggestions are typed in the file; the message, the counts and the checks are computed as you type. Copy puts the string on your clipboard and nothing is committed. To wire it for real, read the staged files from git diff --cached --numstat, ask your model for subjects where the chips are, and run git commit with the string.
What does the limit count?
The whole first line, type(scope): subject, because that is the line Git tools truncate. Seventy-two is the common limit for it. The counter, the problem and the disabled state of the button all read the same number.
Which rules does it check?
Three: a subject must exist, it must not end with a full stop, and the first line must fit the limit. Each one says what to change. The button also needs at least one staged file ticked. Anything else, such as a capital letter or a verb tense, is a style choice and is left to you.
How does it work from the keyboard?
Every field has a visible label, the counter and the problem are tied to the subject field for screen readers, and the checkboxes work with Space. Pressing Copy with a problem moves focus to the subject and reads the problem.