E-signature progress for quotes, contracts and offer letters: who signs, in which order, where each person is (sent, viewed, signed, declined) and when — with a segmented summary bar and a reminder action. It shows status from your signing provider; it does not collect signatures (use Signature pad for that).
Signatures
1 of 3 signedElif SarıClient
elif@quillfeather.example.com
SignedMert GüneşClient finance
mert@quillfeather.example.com
ViewedAylin DemirtaşAccount executive
aylin.demirtas@example.com
Sent
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { SignerStatus } from "@vamos-ui/react/business";
<SignerStatus sequential signers={contract.signers} onRemind={(s) => api.remind(s.id)} />Examples
Signing order with reminders (contracts)
sequential numbers the signers; onRemind may return a promise — the button spins, then confirms.
Master services agreement · v3
1 of 3 signedKaan ToprakVelvet Anchor HotelsSigns 1
kaan@velvetanchor.example.com
SignedPınar IlgazVelvet Anchor Hotels · FinanceSigns 2
pinar@velvetanchor.example.com
ViewedDefne KayaKiln & Linen · CountersignerSigns 3
defne.kaya@example.com
Waiting
Declined (quote)
A decline turns the summary red and shows the signer's note.
Quote Q-2026-0412
Declined by Cem ArıkanCem ArıkanLodestar Freight · COO
“Volume discount on line 4 doesn't match what we agreed on the call.”DeclinedTomás HerreraAccount executive
Signed
API
SignerStatus
| Prop | Type | Default |
|---|---|---|
signers{ id, name, email?, role?, status: "waiting" | "sent" | "viewed" | "signed" | "declined", at?, note?, avatarSrc? }. | Signer[] | — |
sequentialSigners sign in list order: numbered avatars, "Signs 2" for screen readers. | boolean | — |
titleRegion heading; null hides the header and summary bar. | ReactNode | null | "Signatures" |
onRemindAdds Remind to sent / viewed rows. | (signer) => void | Promise<void> | — |
nowReference time for relative dates (tests, screenshots). | number | — |
labelsDictionary namespace "signerStatus": title, summary, declinedSummary, complete, state names, remind, remindName, reminded, order. | Partial<SignerStatusLabels> | — |